Redux applyMiddleWare 使用Redux中间件

关于redux 中间件

在redux中,我们通过dispatch action来更新数据状态,通过reducer来返回新的状态
如果我们想要记录某个状态更新前后的日志,那么我们只需要在此处的dispatch前后做一些处理即可
那如果我们要记录所有状态更新的日志呢？在所有调用disaptch的地方都加上日志处理？这显然不够优雅
但这就是redux中间件要解决的问题

redux中间件内部通过对createStore进行增强,从而重写了dispatch,为我们在dispatch action到达reducer的前后提供了逻辑插入点,对日志记录、异步action、异常监控等功能提供支持

使用中间件

以redux-thunk为例,演示一下如何使用中间件

引入applyMiddleWare和中间件
将applyMiddleWare(thunk)作为createStore的第二个参数传入
在组件中使用函数作为action,中间件会为action函数注入dispatch参数以供调用

store.js

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

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

export default store

actionCreator.js

/* 
异步状态更新和一般case的区别就是，返回的action是一个函数
给这个函数注入dispatch作为参数，那么就能在函数里做异步dispatch
 */
import {INCREMENT,DECREMENT} from './constant'
const createIncrementAction = (data)=>({type:INCREMENT,data})
const createAsyncDecrementAction = (data)=>{
    return (dispatch)=>{
        setTimeout(() => {
            dispatch({type:DECREMENT,data})
        }, 1000);
    }
}

export {
    createIncrementAction,
    createAsyncDecrementAction
}

Count.jsx

import React, { Component } from 'react'
import {
  createAsyncDecrementAction,
  createIncrementAction
} from '../redux/actionCreator'
import store from '../redux/store'

class Count extends Component {
  componentDidMount() {
    store.subscribe(() => {
      this.setState({})
    })
  }

  handleIncrement(data) {
    const { dispatch } = store
    dispatch(createIncrementAction(data))
  }

  handleDecrement(data) {
    const { dispatch } = store
    dispatch(createAsyncDecrementAction(data))
  }

  render() {
    const { count } = store.getState()
    return (
      <div>
        <span>{count}</span>
        <button onClick={() => this.handleIncrement(1)}>+</button>
        <button onClick={() => this.handleDecrement(1)}>-</button>
      </div>
    )
  }
}

export default Count

Redux applyMiddleWare 使用Redux中间件

关于redux 中间件

使用中间件

相关推荐