23.组件改变Store中的数据~~~~ 创建Action和reducer。 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

首先，组件中：

---- 创建并派发Action

在React中，action就是一个对象

import store from './store'

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

render() {
   return (
      <input
            value={this.state.inputValue}
            onChange={(e) => this.handleInputChange(e)}
            className="input"
            id="insertArea"
          />
   )
}
        
handleInputChange = (e) => {
    // 1.创建 Action--告诉Store，要把Store中的inputValue改成 e.target.value
    const action = {   // 在React中，action是一个对象
        type: 'change_input_value',
        value: e.target.value
    }

    // 2.把Action传给Store
    store.dispatch(action)

    // 3.接着，Store会接收到这个action。它会把当前的state和接收到的这个action，一起转发给reducer。在reducer中处理。
    // Redux中的Store会自动地转发当前的state和action给reducer。
   
    // 4. 接着，只要去编写reducer
}

接着，reducer 中：

---- 接收并处理Action，改变Store数据

reducer的作用是--拿到上一次的state数据和当前要做的事情和数据。对上一次的state数据做处理。最后返回一个新的数据给Store

const defaultState = {
    inputValue: '123',
    list: ['学英语', '学react']
}

export default (state = defaultState, action) => {
    console.log(state, action)
    // state指的是Store中，上一次存储的数据。
    // action指的是用户传递过来的那句话。

    if(action.type==='change_input_value') {
       // reducer的限制：可以接收state，但是绝对不能修改state！！
       let newState = JSON.parse(JSON.stringify(state));  // 对拿到的上一次state做深拷贝。

       // 5. reducer 去改变数据
       newState.inputValue = action.value
       // 6. 并返回一个 newState 给Store
       return newState
       // 7. 接着Store接收到newState后，会自动用newState自动替换掉老的state。
    }
    return state
}

通过Redux DevTools进行调试，可以看到：已经实现了在input中输入数据时，store中的数据也会发生变化 。

最后，组件中：

---在组件中订阅store

Store中的数据只要发生改变，subscribe中的回调函数就会自动执行

import store from './store'

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

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

handleStoreChange = () => {
   console.log('store changed') // Store数据发生变化，让页面上的input的value也跟着变化
   this.setState(store.getStore()) // 当感知到Store数据发生变化时，使用store.getState()从Store中重新取一次数据。
   // 然后调用this.setState 替换掉当前组件中的数据。
}

这样就实现了组件派发action---Store接收并自动转发给reducer----reducer接收state和action，处理数据，返回newState给Store ---- Store 自动用newState替换掉老的state ----组件中订阅Store（当Store中数据发生变化，会自动执行subscribe中的回调函数，去替换掉当前的state）