React ---- 狀態管理之Redux
阿新 • • 發佈:2019-02-03
REDUX: 狀態管理
flux ->
|- vuex // vue
|- react-redux // react
- 狀態管理: 應用可以在同一個地方查詢、改變、傳播狀態(簡單來說就是資料的共用,懂~~~)
- 指導思想:頂層元件有個資料儲存室(store),其他底層共享頂層元件的資料儲存室
- 資料流動:component->action->reducer->state->component
- component: 展示結果(含結果處理程式碼)
- action: 動作轉發,非同步請求處理, dispath (出現在元件裡面)
- reducer: 處理業務邏輯,不建議直接修改state,返回新state
- Object.assign(新物件,物件1,物件2) 一般使用此方法去給state新增新資料
- state: 狀態收集、更新內部state狀態,更新component
下面說一下具體實現
第一步:在元件外部定義 store
1.建立預設狀態(一般const or let一個物件)
const defaultState={
arr:['qq','bmw7'],
};
2.建立 reducer 純函式(函式必須有返回值)
let reducer=(state=defaultState,action)=>{
let {type,payload}=action;
switch (type){
case 'ADD_ITEM':
// state.arr.push(payload) //直接修改state
return Object.assign({},state,{
arr: state.arr.concat(payload)
});
break;
default:
return state;
}
};
3.例項化 store 物件
let store = createStore(reducer,defaultState);
第二步:在元件裡面使用 store
1.訂閱 store (一般在 componentDidMount 裡來接受 store 資料)
this.props.store.subscribe(()=>{ //訂閱store的狀態
console.log('收到訂閱了store的資料');
console.log(this.props.store.getState()); //state物件
this.setState({
arr:this.props.store.getState().arr
});
})
2.action(釋出/更新)資料(一般為事件觸發函式)
this.props.store.dispatch({
type:'ADD_ITEM',
payload:this.refs.t1.value
});
最後 —— 啦啦啦 O(∩_∩)O
有一個小巧而精緻的小栗子(補全上面程式碼):
import React from 'react';
import ReactDom from 'react-dom';
import {createStore} from 'redux'; //解構一個createStore 建立狀態物件
//預設狀態 state
const defaultState={
arr:['qq','bmw7'],
};
//建立reducer 純函式 ,必須要有返回值(state)
let reducer=(state=defaultState,action)=>{
let {type,payload}=action;
switch (type){
case 'ADD_ITEM':
// state.arr.push(payload) //直接修改state
return Object.assign({},state,{
arr: state.arr.concat(payload)
});
break;
default:
return state;
}
};
//建立store例項物件
let store = createStore(reducer,defaultState);
//建立ToDoList元件
class ToDoList extends React.Component{
constructor(){
super();
this.state={
arr:[]
};
this.add=this.add.bind(this);
}
componentDidMount(){
this.setState({
arr:this.props.store.getState().arr
});
//訂閱store的狀態
this.props.store.subscribe(()=>{
console.log('收到訂閱了store的資料');
console.log(this.props.store.getState());//state物件
this.setState({
arr:this.props.store.getState().arr
});
})
}
add(){
// action 釋出狀態
this.props.store.dispatch({
type:'ADD_ITEM',
payload:this.refs.t1.value
});
}
render(){
return (
<div title="ToDoList">
<input type="text" ref="t1"/>
<input type="button" value="提交" onClick={this.add}/>
<ul>
{
this.state.arr.map(function(val,index){
return <li key={index}>{val}</li>
})
}
</ul>
</div>
);
}
}
ReactDom.render(
<ToDoList store={store}></ToDoList>,
document.querySelector('#app')
);
下一篇文章將會聊一聊 redux 針對 react 的一個封裝 react-redux,使用的方法與 redux 差不多。