關(guān)于redux是什么，可以看看官方的解釋，下面是使用步驟
首先是安裝? redux，react-redux
npm install?redux ? ? react-redux
在項目中使用：
1.創(chuàng)建store文件夾，在store文件夾下創(chuàng)建index.js文件，即redux倉庫（完整代碼）
import?{createStore}?from?'redux'
import?reducer?from?'./reducer' ? ?? //倉庫管理員
const?store?=?createStore(
????reducer,
????window.__REDUX_DEVTOOLS_EXTENSION__?&&?window.__REDUX_DEVTOOLS_EXTENSION__())
export?default?store
2.再在store文件夾下面創(chuàng)建倉庫管理員reducer.js
const?defaultState?=?{
//倉庫里的數(shù)據(jù)
?refreshToken:null,
????token:'',
????inputValue:?'改變的輸入內(nèi)容',
????user:{userName:'root',password:'root',location:'西安'}
}
export?default?(state?=?defaultState,action)=>{
????//reducer里只能接受state,不能改變state
? ? //type是事件action的類型，意思是，當(dāng)類型等于‘此值時’，把倉庫的值轉(zhuǎn)換成json類型賦值給新的對象，改變新的對象里需要改變的值，再賦值給倉庫，其中action.value是頁面?zhèn)鞯絺}庫的值，下文會提到
????if(action.type?===?'getUserName'){
????????let?newState?=?JSON.parse(JSON.stringify(state))
????????newState.user.userName?=?action.value
????????return?newState
????}
????if(action.type?===?'getPassword'){
????????let?newState?=?JSON.parse(JSON.stringify(state))
????????newState.user.password?=?action.value
????????return?newState
????}
????if(action.type?===?'tokenChage'){
????????let?newState?=?JSON.parse(JSON.stringify(state))
????????newState.token?=?action.value
????????console.log("token="+newState.token)
????????return?newState
????}
????return?state
}
3.在頁面中的使用
首先在全局的index.js引入?import?{Provider}?from?'react-redux'
const?App?=?(
??<Provider?store={store}> ?? //?Provider?---在這里，相當(dāng)于提供器，提供倉庫的 store的數(shù)據(jù)，
????<AppRouter?/> ? ? ? ? ? ? ? ? //這是我自己寫的路由，通過provider，把倉庫數(shù)據(jù)傳給了路由里的組件
??</Provider>
)
因為在上面我已經(jīng)把值傳給了子組件，所有我在子組件中使用父組件的數(shù)據(jù)用this.props
在渲染頁面中使用的話，可以在render（）{ let? {userNameChanger} = this.props
return(
<div>
<Input
????????????????????????????????placeholder={"請輸入用戶名"}
????????????????????????????????style={{?width:?'250px'?}}
????????????????????????????????onChange={userNameChange}
????????????????????????????????defaultValue={this.state.userCode}
????????????????????????????/>
</div>
）
}
//將state轉(zhuǎn)換成props
const?stateToProps?=?(state)?=>?{
????return?{
????????user:?state.user
????}
}
//連接redux數(shù)據(jù)庫，通過type值改變數(shù)據(jù)庫數(shù)據(jù)
const?dispatchToProps?=?(dispatch)?=>?{
????return?{
????????userNameChange(e)?{
????????????let?action?=?{
????????????????type:?'getUserName',
????????????????value:?e.target.value
????????????}
????????????dispatch(action)
????????},
????????passwordChange(e)?{
????????????let?action?=?{
????????????????type:?'getPassword',
????????????????value:?e.target.value
????????????}
????????????dispatch(action)
????????},
????????tokenChage(){
????????????let?action?=?{
????????????????type:?'tokenChage',
????????????????value:?token
????????????}
????????????dispatch(action)
????????}
????}
}
export?default?connect(stateToProps,?dispatchToProps)(Login)
最后到處組件的時候需要用連接器? connect? 連接頁面和倉庫?
import?{?connect?}?from?'react-redux'
