24.组件改变Store中数据例子 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

例子1：点击button,向Store中的list添加一项

在组件中：

import store from './store'

<button onClick={this.handleBtnClick}>提交</button>

handleBtnClick = () => {
   // 1.创建action
   const action = {
      type: 'add_todo_item'
   }
   
   // 2.派发action
   store.dispath(action)
}

接着，Store会接收到派发过来的action。并自动将上一个state和这个action，一起转发给reducer。

在reducer中：

   const defaultState = {
        inputValue: '123',
        list: ['学英语','学react']
   }
   
   // 接收到上一次的state和当前的action 
   export default (state, action) => {
      if(action.type === 'add_todo_item') {
        let newState = JSON.parse(JSON.stringify(state)) // 对上一次的state作深拷贝
        newState.list.push(newState.inputValue) // 改变newState中的list
        return newState // 返回newState给Store
      }
      return state
   }

接着，Store会接收到reducer返回来的 newState,自动使用newState替换掉原来的state。改变Store中的数据。

在组件中：

import store from './store'

constructor(props) {
   super(props)
   this.state = store.getState() 
}

componentDidMount() {
   store.subscribe(this.handleStoreChange) // 订阅Store---当Store中的数据发生改变时，subscribe中的回调函数会自动执行
}

handleStoreChange = () => {
    this.setState(store.getState())  // 从store中重新获取一次数据，改变当前组件中的state。
}
⚠️ **GitHub.com Fallback** ⚠️