react系列之redux

目录结构

| src
    -| index.js
    -| App.js
    -| store.js
    -| reducer.js
    -| actionCreator.js
    -| actionTypes.js
    -| Ui.js

安装redux

1. 在store.js中引入redux中的createStore、combineReducers

   createStore: 创建store，并传入reducer
   combineReducers: 将多条reducer合并

2. 创建reducer.js，处理state

    const defaultState = {
      input: ''
    }
    export default (state = defaultState, action) => {
      switch (action.type) {
        case actionTypes.CHANGE_INPUT:
          return {
            ...state,
            input: action.value
          }
        default:
          return state
      }
    }
   

3. 创建actionCreator.js,定义action方法

    export const changeInput = (value) => ({
      type: actionTypes.CHANGE_INPUT,
      value: value
    })
   

4. 在App.js中事件触发，dispatch调用action，改变state，更新store

5. 在App.js中store.subscribe()订阅store变化，更新store，更新所有组件view

总结