redux集成使用流程

安装redux（这三个配套使用）

cnpm i redux -S
cnpm i redux-react -S
cnpm redux-thunk -S

构建store逻辑

// store → index.js
  const store = createStore(
    combineReducers({good,user,...}),
    compose(
      apllyMiddleware(ReduxThunk),
      apllyMiddleware(ReduxLogger),
      ...
    )
  )
  // compose用来调用中间件

// store → reducers → reducer1.js
  function reducer(state=initState, action) {
    return producer(state, NewState=> {
      switch(action.type) {
        case: '':
          // do something
          break
        ...
      }
    })
  }
  export default reducer

在组件中引入redux

// App.js
  function App() {
    return (
      <Provider store = {store}>
      <Provider />
    )
  }

在组件中使用

// 类组件
// 方式一
@connect(
  state=>({msg: state.user.msg, ...}),
  dispatch=>({changeMsg: (payload)=>({type: payload})})
)
class Home extends PureComponent{ }


// 方式二
export default connect(
  state=>({msg: state.user.msg, ...}),
  dispatch=>({changeMsg: (payload)=>({type: payload})})
)(home)



// 函数式组件
export default connect(
  state=>({msg: state.user.msg, ...}),
  dispatch=>({changeMsg: (payload)=>({type: payload})})
)(props=>(<div><div />))

//hooks用法
export default () => {
  const msg = useSelector(state => state.user.msg)
  const disptch = useDispatch
}

在store中创建actions文件调用调用接口，一切外部数据从状态管理开始