1 store
2 reducer
3 component
4 action
過程
創(chuàng)建 (store + reducer)
import {createStore} form 'redux';
import reducer from './reducer.js';
const store = new createStore(reducer);
export default store;
創(chuàng)建 reducer.js
reducer內部只能讀取state不能修改熟空，需要使用深拷貝（json形式的數(shù)據對象）JSON.parse(JSON.stringfy(state))
const defaultState = {
name:'1'
}
export (state=defaultState,action)=>{
if (action.type == 'haha'){
let newState = JSON.parse(JSON.stringfy(state));
newState.name = action.value;
return newState;
}
return state;
}
component 內修改state
1.設置訂閱 subscribe
- 創(chuàng)建action
3.dispatch(action) ==> 會自動傳遞給 reducer ==> store更新 ==>訂閱更新component state
import store from './store';
class TodoList extend Component{
constructor(props){
super(props);
this.state = store.getState();
this.store.subscribe(this.updteState); //不訂閱state不會更新
this.updteState = this.updteState.bind(this); //不要忘記這個
}
changeIpt(ev){
const action = {
type:'haha',
value:ev.target.value
}
}
updteState(){
this.setState(store.getState());
}
render(){
return (<input onChange={()=>{this.changeIpt()}}>)
}
}
