Redux状态管理 3.处理异步、更优雅的和react相结合

Redux状态管理3 处理异步、调试工具、更优雅的和react相结合

• Redux处理异步，需要redux-thunk插件
• 使用react-redux优雅的链接react和redux

Redux默认只处理同步，异步需要react-thunk中间件

• yarn add redux-thunk
• 使用applyMiddleware开启thunk中间件
• Action可以返回函数，使用dispatch提交action

import thunk from 'redux-thunk';
const store = createStore(counter, applyMiddleware(thunk))

export function addNumAsync () {
  return dispatch => {
    setTimeout(() => {
      dispatch(addNum())
    }, 2000)
  }
}


...
<button onClick={()=>store.dispatch(addNumAsync())}>延迟增加</button>