關(guān)于redux是什么降宅，可以看看官方的解釋，下面是使用步驟
首先是安裝? redux挎扰，react-redux
npm install?redux ? ? react-redux
在項(xiàng)目中使用：
1.創(chuàng)建store文件夾翠订，在store文件夾下創(chuàng)建index.js文件，即redux倉(cāng)庫(kù)（完整代碼）
import?{createStore}?from?'redux'
import?reducer?from?'./reducer' ? ?? //倉(cāng)庫(kù)管理員
const?store?=?createStore(
????reducer,
????window.__REDUX_DEVTOOLS_EXTENSION__?&&?window.__REDUX_DEVTOOLS_EXTENSION__())
export?default?store
2.再在store文件夾下面創(chuàng)建倉(cāng)庫(kù)管理員reducer.js
const?defaultState?=?{
//倉(cāng)庫(kù)里的數(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)類型等于‘此值時(shí)’，把倉(cāng)庫(kù)的值轉(zhuǎn)換成json類型賦值給新的對(duì)象梧躺，改變新的對(duì)象里需要改變的值似谁，再賦值給倉(cāng)庫(kù)，其中action.value是頁(yè)面?zhèn)鞯絺}(cāng)庫(kù)的值掠哥，下文會(huì)提到
????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.在頁(yè)面中的使用
首先在全局的index.js引入?import?{Provider}?from?'react-redux'
const?App?=?(
??<Provider?store={store}> ?? //?Provider?---在這里巩踏，相當(dāng)于提供器，提供倉(cāng)庫(kù)的 store的數(shù)據(jù)续搀，
????<AppRouter?/> ? ? ? ? ? ? ? ? //這是我自己寫的路由塞琼，通過(guò)provider，把倉(cāng)庫(kù)數(shù)據(jù)傳給了路由里的組件
??</Provider>
)
因?yàn)樵谏厦嫖乙呀?jīng)把值傳給了子組件禁舷，所有我在子組件中使用父組件的數(shù)據(jù)用this.props
在渲染頁(yè)面中使用的話彪杉，可以在render（）{ let? {userNameChanger} = this.props
return(
<div>
<Input
????????????????????????????????placeholder={"請(qǐng)輸入用戶名"}
????????????????????????????????style={{?width:?'250px'?}}
????????????????????????????????onChange={userNameChange}
????????????????????????????????defaultValue={this.state.userCode}
????????????????????????????/>
</div>
）
}
//將state轉(zhuǎn)換成props
const?stateToProps?=?(state)?=>?{
????return?{
????????user:?state.user
????}
}
//連接redux數(shù)據(jù)庫(kù)，通過(guò)type值改變數(shù)據(jù)庫(kù)數(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)
最后到處組件的時(shí)候需要用連接器? connect? 連接頁(yè)面和倉(cāng)庫(kù)?
import?{?connect?}?from?'react-redux'
