Redux中间件

当 store中的状态发生改变时 redux-logger会把改变之前的状态和改变之后的状态输出到控制台

安装 redux-logger 所有的中间件在使用之前都必须安装

yarn add redux-logger --save

使用 中间件 需要redux 的另一个方法applyMiddleware 从redux中导出它 同时导入中间件

import { createStore, applyMiddleware } from 'redux'
import reduxLogger from 'redux-logger'

在调用createStore时传入第二个参数 applyMiddleware(中间件名字)

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

import reduxLogger from 'redux-logger'

export default createStore(reducer, applyMiddleware(reduxLogger))

这样 在控制台修改状态试试看 控制台会输出修改前和修改后的状态

当需要异步操作的时候 例如定时器 ajax 等这些异步操作 无法直接在actionCreator中 进行

redux-thunk函数 可以让我们的actionCreator返回一个function函数 这个函数的参数是dispatch 和 getState 就是store.dispatch 和 store.getState() 它将dispatch的控制权交给actionCreator返回的函数 在这个函数中 我们可以在任意位置dispatch

安装

yarn add redux-thunk --save

导入 且作为第二个参数传入 createStore 时的applyMiddleware

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

import reduxLogger from 'redux-logger'
import reduxThunk from 'redux-thunk'

export default createStore(reducer, applyMiddleware(reduxLogger, reduxThunk))

redux-promise 处理异步数据 常用Promise reudx-promise中间件用来处理redux中的Promise

安装

yarn add redux-promise --save

###导入并使用

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

import reduxLogger from 'redux-logger'
import reduxThunk from 'redux-thunk'
import reduxPromise from 'redux-promise'

export default createStore(reducer, applyMiddleware(reduxLogger, reduxThunk, reduxPromise))

使用redux-promise后 在actionCreator中有两种方法

1. 直接在某个actionCreator中返回一个Promise 实例 这种用法 只能处理resolve,并在resolve时传入一个action对象 若 reject 直接抛出错误

import * as Types from '../action-types'

export default {
add (amount) {
  return (dispatch, getState) => {
    setTimeout(() => {
      dispatch({
        type: Types.ADD,
        amount
      })
    }, 2000)
  }
},
minus (amount) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        type: Types.MINUS,
        amount
      })
    }, 2000)
  })
}
}

2. 若失败成功都要处理 不能直接在actionCreator 函数中返回Promise实例 而是在返回action对象中增加payload属性 payload属性值是一个Promise 若 Promise resolve 那么payload代表的就是resolve时传入的值 若 reject 那么payload代表的就是resolve时传入的值 同时reducer函数也需要修改

action/index.js
import * as Types from '../action-types'

export default {
  add (amount) {
    return (dispatch, getState) => {
      setTimeout(() => {
        dispatch({
          type: Types.ADD,
          amount
        })
      }, 2000)
    }
  },
  minus (amount) {
    return {
      type: Types.MINUS,
      payload: new Promise((resolve, reject) => {
        // resolve(1)
        reject(10)
      })
    }
  }
}

reducer/index.js
import * as Types from '../action-types'

export default function (state = {num: 0}, action) {
  switch (action.type) {
    case Types.ADD:
      return {
        num: state.num + action.amount
      }
    case Types.MINUS:
      return {
        num: state.num - action.payload // actionCreator 函数使用 Promise 对应修改为减去 action.payload
      }
  }

  return state
}