react-状态管理redux-thunk的使用

完整 demo https://gitee.com/siyuev5/react-demo/tree/master/redux-thunk-demo

redux-thunk 是一个中间件 拿来实现异步操作的 我也不知道咋解释看代码吧

npm install redux redux-thunk

redux/index.js 如下

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'

//支持调试工具
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
  : compose

const enhancer = composeEnhancers(applyMiddleware(thunk))
export default createStore(reducer, enhancer)

redux/reducer.js 如下

import * as actionTypes from './actionTypes'

const defaultState = {
  list: []
}
export default (state = defaultState, action) => {
  switch (action.type) {
    case actionTypes.ADD_LIST_ITEM:
      return {
        ...state,
        list: [...state.list, action.value]
      }
      break

    default:
      break
  }
  return state
}

redux/actionTypes.js 如下

export const ADD_LIST_ITEM = 'add_list_item'

redux/actionCreators.js 如下

import * as actionTypes from './actionTypes'

export const GetAddListItemAction = value => ({
  type: actionTypes.ADD_LIST_ITEM,
  value
})

export const asyncGetAddListItemAction = () => {
  return dispatch => {
    //模拟异步加载
    setTimeout(() => {
      dispatch(GetAddListItemAction('我是异步数据'))
    }, 500)
  }
}

使用发方式

import redux from './redux/index'
import * as actions from './redux/actionCreators'

 const action = actions.asyncGetAddListItemAction()
  redux.dispatch(action)

和以往不同的是redux.dispatch 在不使用 redux-thunk 只能传递一个 {} 对象，使用 redux-thunk 中间件的时候可以传递一个函数， redux-thunk 内部会判断 redux.dispatch 参数是对象还是方法，如果是方法就调用并且传递 2个参数，第一个参数就是 redux 原生的 dispatch 方法，这样网络请求异步通知后 可以直接调用redux.dispatch 像最开始那样传递一个对象过去，第二个参数就是 redux.getState 方法，可以 getState() 直接调用获取state 内部做些处理判断。

export const asyncGetAddListItemAction = () => {
  return dispatch => {
    //模拟异步加载
    setTimeout(() => {
      dispatch(GetAddListItemAction('我是异步数据'))
    }, 500)
  }
}