紀錄一下react redux的用法

2021-08-15 03:59:03 字數 2680 閱讀 1814

最近學習react,結果碰到了redux這個玩意,琢磨琢磨勉勉強強會用了。

紀錄一下,以免以後忘了。

首先是專案的根目錄

index.js

//引入redux檔案

import from 'react-redux'

import from 'redux'

import reducer from './redux/reducer';

//建立資料流的'倉庫'

const store = createstore(reducer)

//專案的根**類

class

root

extends

react.component />

'/register' component=/>))}

}

接下來以往註冊reister元件傳輸資料為例,進行redux的操作

建立乙個總倉庫 reduce.js 功能很簡單就是把多個分散的redux合併起來

import  from

'redux';

import from

'./user.redux'

import from

'./login.redux'

//合併了user和login這樣在單獨的元件中用state就可以區分不同的倉庫檔案

export default combinereducers()

建立註冊用的倉庫 register.redux.js

import axios from 'axios';

//設定初始值

const initstate =

//控制函式,把變更的函式返回給相應的模組,這裡的作用是註冊

export function

user

(state = initstate, action) ;

case

'err':

return ;

default:

return state;

}}//如果錯誤執行的函式向控制函式傳入的actio.type

function

errmsg

(msg)

}//如果正確執行的函式

function

reqsucess

(data)

}//在註冊元件中執行的函式

export function

register

() if (pwd != repwd)

//非同步請求

return dispatch => )

.then((res) => ))

} else })}

}

專案的註冊元件register.js

mport 

from

'react-redux'

import

from

'../../redux/user.redux'

//通過裝飾器將倉庫的資料直接放進元件中

@connect(

state=>state.user,

)//當執行註冊時

class.........

constructor

(props)

}register

()

如此就完成了乙個最簡單的redux控制

要得到redux資料時需要在頁面中引入數它(注意:不觸發switch就返回預設的引數了),平常的開發中會遇到這樣一種情況,有多個頁面都需要redux資料如果每乙個頁面都執行一次顯然就不夠優雅。可以在index.js頁面這樣定義乙個總控元件

class root extends react.component >

//總控元件

authroute>

path='/geniusinfo'

component=/>

path='/bossinfo'

component=/>

path='/login'

component=/>

path='/register'

component=/>

component=/>

switch>

div>

router>

provider>))}

}

而在authroute元件中就很簡單咯。

import react,  from 'react';

import axios from 'axios';

import from 'react-router-dom'

import from 'react-redux'

import from '../redux/user.redux'

//把它路由化,這樣在走路由的時候會執行裡面的方法

@withrouter

//redux裡面的方法,返回取得的值

@connect(

null,

)class

authroute

extends

react.componentelse}})

}render()

}

整理一下Entity Framework的查詢

entity framework是個好東西,雖然沒有hibernate功能強大,但使用更簡便。今天整理一下常見sql如何用ef來表達,func形式和linq形式都會列出來 本人更喜歡func形式 1 簡單查詢 sql select from clients where type 1 and dele...

思考一下 的結果

看到這個題的第一眼,我想都沒寫直接就是false,不就是乙個取反嗎,還比較啥 ok,這個時候已經掉到坑里去了,我太小瞧它了!這道題有兩個點 下面我們看看分析 首先,的優先順序大於 所以會先計算 而其實是乙個引用型別,這裡又涉及到了對引用型別轉化為布林值。轉化為布林值為true 然後取反後為false...

整理一下Entity Framework的查詢

entity framework是個好東西,雖然沒有hibernate功能強大,但使用更簡便。今天整理一下常見sql如何用ef來表達,func形式和linq形式都會列出來 本人更喜歡func形式 1 簡單查詢 sql select from clients where type 1 and dele...