Redux的使用和原理

七、Redux

为什么需要Redux

◼ JavaScript开发的应用程序，已经变得越来越复杂了：

• JavaScript需要管理的状态越来越多，越来越复杂；
• 这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等，也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页；

◼ 管理不断变化的state是非常困难的：

• 状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能会引起状态的变化；
• 当应用程序复杂时，state在什么时候，因为什么原因而发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪；

◼ React是在视图层帮助我们解决了DOM的渲染过程，但是State依然是留给我们自己来管理：

• 无论是组件定义自己的state，还是组件之间的通信通过props进行传递；也包括通过Context进行数据之间的共享；
• React主要负责帮助我们管理视图，state如何维护最终还是我们自己来决定；

◼ Redux就是一个帮助我们管理State的容器：Redux是JavaScript的状态容器，提供了可预测的状态管理；

◼ Redux除了和React一起使用之外，它也可以和其他界面库一起来使用（比如Vue），并且它非常小（包括依赖在内，只有2kb）

Redux的核心思想

Store

◼ Redux的核心理念非常简单。

◼ 比如我们有一个朋友列表需要管理：

• 如果我们没有定义统一的规范来操作这段数据，那么整个数据的变化就是无法跟踪的；
• 比如页面的某处通过products.push的方式增加了一条数据；
• 比如另一个页面通过products[0].age = 25修改了一条数据；

◼ 整个应用程序错综复杂，当出现bug时，很难跟踪到底哪里发生的变化；

◼ 所以我们需要一个总的数据中心（store）来管理全部的数据

// 初始化数据
const initialState = {
  name: "lyc",
  count: 100
}

action

◼ Redux要求我们通过action来更新数据：

• 所有数据的变化，必须通过派发（dispatch）action来更新；
• action是一个普通的JavaScript对象，用来描述这次更新的type和content；

◼ 比如下面就是几个更新friends的action：

• 强制使用action的好处是可以清晰的知道数据到底发生了什么样的变化，所有的数据变化都是可跟追、可预测的；
• 当然，目前我们的action是固定的对象；
• 真实应用中，我们会通过函数来定义，返回一个action；

const changeNameAction = (name) => {
  return {
    type: "CHANGE_NAME",
    name
  }
}
​
const addNumberAction = (num) => {
  return {
    type: "ADD_NUMBER",
    num
  }
}
​
module.exports = {
  changeNameAction,
  addNumberAction
}
​

reducer

◼ 但是如何将state和action联系在一起呢？答案就是reducer

• reducer是一个纯函数；
• reducer做的事情就是将传入的state和action结合起来生成一个新的state；

// 定义reducer函数
// 两个参数：
// 参数一：store中目前保存的store
// 参数二：本次需要更新的action(dispatch传入的action)
// 返回值：它的返回值会作为store之后存储的state 
function reducer(state = initialState, action) {
  console.log("reducer:", state, action);
  // 有新数据进行更新的时候，那么返回一个新的state
  switch (action.type) {
    case "change_name":
      return { ...state, name: action.name }
    case "add_number":
      return { ...state, count: action.count }
    default:
      return state
  }
​
  // 没有新数据更新，那么就返回之前的state
  return state
}

Redux的三大原则

◼ 单一数据源

• 整个应用程序的state被存储在一颗object tree中，并且这个object tree只存储在一个 store 中：
• Redux并没有强制让我们不能创建多个Store，但是那样做并不利于数据的维护；
• 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改；

◼ State是只读的

• 唯一修改State的方法一定是触发action，不要试图在其他地方通过任何的方式来修改State：
• 这样就确保了View或网络请求都不能直接修改state，它们只能通过action来描述自己想要如何修改state；
• 这样可以保证所有的修改都被集中化处理，并且按照严格的顺序来执行，所以不需要担心race condition（竟态）的问题；

◼ 使用纯函数来执行修改

• 通过reducer将 旧state和 actions联系在一起，并且返回一个新的State：
• 随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分；
• 但是所有的reducer都应该是纯函数，不能产生任何的副作用；

Redux的基本使用

◼ 安装redux：

pnpm install redux --save

◼ 1.创建一个新的项目文件夹：learn-redux

pnpm init

◼ 2.创建src目录，并且创建index.js文件

◼ 3.修改package.json可以执行index.js

"scripts": {
"start": "node src/index.js" 
}

Redux的使用

◼ 1.创建一个对象，作为我们要保存的状态：

// 初始化数据
const initialState = {
  name: "lyc",
  count: 100
}

◼ 2.创建Store来存储这个state

• 创建store时必须创建reducer；
• 我们可以通过 store.getState 来获取当前的state；

const { createStore } = require("redux")
const reducer = require("./reducer.js")
​
// 创建的store
const store = createStore(reducer)
 
module.exports = store

◼ 3.通过action来修改state

• 通过dispatch来派发action；
• 通常action中都会有type属性，也可以携带其他的数据；

const { CHANGE_NAME, ADD_NUMBER } = require("./constants")
​
const changeNameAction = (name) => {
  return {
    type: "CHANGE_NAME",
    name
  }
}
​
const addNumberAction = (num) => {
  return {
    type: "ADD_NUMBER",
    num
  }
}
​
module.exports = {
  changeNameAction,
  addNumberAction
}

◼ 4.修改reducer中的处理代码

• 这里一定要记住，reducer是一个纯函数，不需要直接修改state；

const { ADD_NUMBER, CHANGE_NAME } = require("./constants")
​
// 初始化数据
const initialState = {
  name: "lyc",
  count: 100
}
​
function reducer(state = initialState, action) {
  console.log("reducer:", state, action);
  // 有新数据进行更新的时候，那么返回一个新的state
  switch (action.type) {
    case ADD_NUMBER:
      return { ...state, name: action.name }
    case CHANGE_NAME:
      return { ...state, count: action.count }
    default:
      return state
  }
​
  // 没有新数据更新，那么就返回之前的state
  return state
}
​
module.exports = reducer

◼ 5.还可以抽离出公共的变量，防止打错字

const ADD_NUMBER = "add_number"
const CHANGE_NAME = "change_name"
​
module.exports = {
  ADD_NUMBER,
  CHANGE_NAME
}

◼ 6.可以在派发action之前，监听store的变化：

const store = require("./store")
​
const unsubscribe = store.subscribe(() => {
  console.log("订阅数据的变量", store.getState());
})
​
// 修改store中的数据：必须action
store.dispatch({ type: "change_name", name: "kobe" })
​
// 取消订阅
unsubscribe()
​
store.dispatch({ type: "add_number", count: 999 })

Redux结构划分

◼ 如果我们将所有的逻辑代码写到一起，那么当redux变得复杂时代码就难以维护。

• 接下来，我会对代码进行拆分，将store、reducer、action、constants拆分成一个个文件。
• 创建store/index.js文件：
• 创建store/reducer.js文件：
• 创建store/actionCreators.js文件：
• 创建store/constants.js文件：

◼ 我们已经知道了redux的基本使用过程，那么我们就更加清晰来认识一下redux在实际开发中的流程：

Redux官方图

React结合Redux

◼ 目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去。

◼ 这里我创建了两个组件：

• Home组件：其中会展示当前的counter值，并且有一个+1和+5的按钮；
• Profile组件：其中会展示当前的counter值，并且有一个-1和-5的按钮；

◼ 核心代码主要是两个：

• 在 componentDidMount 中定义数据的变化，当数据发生变化时重新设置 counter;
• 在发生点击事件时，调用store的dispatch来派发对应的action；

案例结构

详细代码

Redux代码

store/index.js

import { createStore } from "redux";
import reducer from "./reducer";
​
const store = createStore(reducer)
​
export default store

store/reducer.js 修改state

import * as actionTypes from "./constants"
​
const initialState = {
  counter: 100
}
​
// 进行逻辑操作
function reducer(state = initialState, action) {
  switch (action.type) {
    case actionTypes.ADD_NUMBER:
      return { ...state, counter: state.counter + action.num }
    case actionTypes.SUB_NUMBER:
      return { ...state, counter: state.counter - action.num }
    default:
      return state
  }
}
​
export default reducer

store/constants.js 公共变量

export const ADD_NUMBER = "add_number"
export const SUB_NUMBER = "sub_number"

store/actionCreators.js 更改数据

import * as actionTypes from "./constants"
export const addNumberAction = (num) => ({
  type: actionTypes.ADD_NUMBER,
  num
})
​
export const subNumberAction = (num) => ({
  type: actionTypes.SUB_NUMBER,
  num
})

应用层

home.js

import React, { PureComponent } from "react";
import store from "../store";
import { addNumberAction } from "../store/actionCreators";
​
export class home extends PureComponent {
  constructor() {
    super();
​
    this.state = {
      counter: store.getState().counter,
    };
  }
  componentDidMount() {
    store.subscribe(() => {
      const state = store.getState();
      this.setState({
        counter: state.counter,
      });
    });
  }
​
  addNumber(num) {
    store.dispatch(addNumberAction(num));
  }
​
  render() {
    const { counter } = this.state;
    return (
      <div>
        <h2>home counter:{counter}</h2>
        <div>
          <button onClick={(e) => this.addNumber(1)}>+1</button>
          <button onClick={(e) => this.addNumber(5)}>+5</button>
          <button onClick={(e) => this.addNumber(10)}>+10</button>
        </div>
      </div>
    );
  }
}
​
export default home;

React-redux使用

◼ 开始之前需要强调一下，redux和react没有直接的关系，你完全可以在React, Angular, Ember, jQuery, or vanillaJavaScript中使用Redux。

◼ 尽管这样说，redux依然是和React库结合的更好，因为他们是通过state函数来描述界面的状态，Redux可以发射状态的更新，让他们作出相应。

◼ 虽然我们之前已经实现了connect、Provider这些帮助我们完成连接redux、react的辅助工具，但是实际上redux官方帮助我们提供了 react-redux 的库，可以直接在项目中使用，并且实现的逻辑会更加的严谨和高效。

6.1 安装

npm install --save react-redux

6.2 核心

• < Provider store>
  

• connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
  

Provider 内的任何一个组件，如果需要使用 state 中的数据，就必须是「被 connect 过的」组件——使用 connect 方法对「你编写的组件（MyComp）」进行包装后的产物。

这个函数允许我们将 store 中的数据作为 props 绑定到组件上。

简单的流程如下图所示：

react-redux中的connect方法将store上的getState 和 dispatch 包装成组件的props。

将之前直接在组件上dispatch的代码修改为如下：

import React, { PureComponent } from 'react'
import { connect } from "react-redux"
// import store from "../store"
import { addNumberAction, subNumberAction } from '../store/counter'
​
export class About extends PureComponent {
​
  calcNumber(num, isAdd) {
    if (isAdd) {
      this.props.addNumber(num)
    } else {
      this.props.subNumber(num)
    }
  }
​
  render() {
    const { counter, banners, recommends, userInfo } = this.props
​
    return (
      <div>
        <div className='user'>
          <h2>nickname: {userInfo.nickname}</h2>
        </div>
        <h2>About Page: {counter}</h2>
        <div>
          <button onClick={e => this.calcNumber(6, true)}>+6</button>
          <button onClick={e => this.calcNumber(88, true)}>+88</button>
          <button onClick={e => this.calcNumber(6, false)}>-6</button>
          <button onClick={e => this.calcNumber(88, false)}>-88</button>
        </div>
        <div className='banner'>
          <h2>轮播图数据:</h2>
          <ul>
            {
              banners.map((item, index) => {
                return <li key={index}>{item.title}</li>
              })
            }
          </ul>
        </div>
        <div className='recommend'>
          <h2>推荐数据:</h2>
          <ul>
            {
              recommends.map((item, index) => {
                return <li key={index}>{item.title}</li>
              })
            }
          </ul>
        </div>
      </div>
    )
  }
}
​
const mapStateToProps = (state) => ({
  counter: state.counter.counter,
  banners: state.home.banners,
  recommends: state.home.recommends,
  userInfo: state.user.userInfo
})
​
const mapDispatchToProps = (dispatch) => ({
  addNumber(num) {
    dispatch(addNumberAction(num))
  },
  subNumber(num) {
    dispatch(subNumberAction(num))
  }
})
​
export default connect(mapStateToProps, mapDispatchToProps)(About)

connect高阶组件

/hoc/connenct.js

// 手写connect的函数：
// 参数一：函数
// 函数二：函数
// 返回值：函数
​
// import store from "../store"   将store解耦
​
import { PureComponent } from "react";
import { StoreContext } from "./StoreContext";
​
export function connect(mapStateToProps, mapDispatchToProps) {
​
  // 高阶组件：函数
  return function (WrapperComponent) {
    class NewComponent extends PureComponent {
      constructor(props, context) {
        super(props)
​
        this.state = mapStateToProps(context.getState())
      }
      componentDidMount() {
        this.unsubscribe = this.context.subscribe(() => {
          // this.forceUpdate()
          this.setState(mapStateToProps(this.context.getState()))
        })
      }
      render() {
        // 传入store里的state
        const stateObj = mapStateToProps(this.context.getState())
        // 传入store里的dispatch
        const dispatchObj = mapDispatchToProps(this.context.dispatch)
        // 绑定组件，将上面的值作为注入为props
        return <WrapperComponent {...this.props} {...stateObj} {...dispatchObj} />
      }
    }
​
    NewComponent.contextType = StoreContext
​
    return NewComponent
  }
}

/hoc/StoreContext.js

创建一个Context，用于获取用户Store

import { createContext } from "react";
​
export const StoreContext = createContext()

/hoc/index.js

// 统一导出
export { StoreContext } from "./StoreContext"
export { connect } from "./connect"

index.js 主函数

我们提供一个Provider，Provider来自于我们创建的Context，让用户将store传入到value中即可；

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from "react-redux"
import { StoreContext } from "./hoc"
import App from './App';
import "./style.css"
import store from './store';
​
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // 由此可见react-redux官方也是使用的Provider来获取用户的Store
  <Provider store={store}>
    <StoreContext.Provider value={store}>
      <App />
    </StoreContext.Provider>
  </Provider>
);

Redux的异步操作

在redux中如何可以进行异步的操作呢？

• 答案就是使用中间件（Middleware） ；
• 学习过Express或Koa框架的童鞋对中间件的概念一定不陌生；
• 在这类框架中，Middleware可以帮助我们在请求和响应之间嵌入一些操作的代码，比如cookie解析、日志记录、文件压缩等操作；

◼ redux也引入了中间件（Middleware）的概念：

• 这个中间件的目的是在dispatch的action和最终达到的reducer之间，扩展一些自己的代码；
• 比如日志记录、调用异步接口、添加代码调试功能等等；

◼ 我们现在要做的事情就是发送异步的网络请求，所以我们可以添加对应的中间件：

• 这里官网推荐的、包括演示的网络请求的中间件是使用 redux-thunk；

◼ redux-thunk是如何做到让我们可以发送异步的请求呢？

• 我们知道，默认情况下的dispatch(action)，action需要是一个JavaScript的对象；

• redux-thunk可以让dispatch(action函数)，action可以是一个函数；

• 该函数会被调用，并且会传给这个函数一个dispatch函数和getState函数；

  • dispatch函数用于我们之后再次派发action；
  • getState函数考虑到我们之后的一些操作需要依赖原来的状态，用于让我们可以获取之前的一些状态；

actionCreators.js

// 编写异步请求数据函数
export const fetchHomeMultidataAction = () => {
  return function(dispatch) {
    axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
      const banners = res.data.data.banner.list
      const recommends = res.data.data.recommend.list
​
      dispatch(changeBannersAction(banners))
      dispatch(changeRecommendsAction(recommends))
    })
  }
}

category.jsx

import React, { PureComponent } from 'react'
import { connect } from "react-redux"
import { fetchHomeMultidataAction } from "../store/home"
​
export class Category extends PureComponent {
​
  componentDidMount() {
    this.props.fetchHomeMultidata()
  }
​
  render() {
    return (
      <div>
        <h2>Category Page: {this.props.counter}</h2>
      </div>
    )
  }
}
​
const mapStateToProps = (state) => ({
  counter: state.counter.counter
})
​
// 调用异步请求数据函数
const mapDispatchToProps = (dispatch) => ({
  fetchHomeMultidata() {
    dispatch(fetchHomeMultidataAction())
  }
})
​
export default connect(mapStateToProps, mapDispatchToProps)(Category)

如何使用redux-thunk

◼ 1.安装redux-thunk

◼ 2.在创建store时传入应用了middleware的enhance函数

• 通过applyMiddleware来结合多个Middleware, 返回一个enhancer；
• 将enhancer作为第二个参数传入到createStore中；

import { createStore, applyMiddleware } from "redux"
import thunk from "redux-thunk"
import reducer from "./reducer"
​
// 正常情况下 store.dispatch(object)
// 想要派发函数 store.dispatch(function)
​
​
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)))
​
export default store

◼ 3.定义返回一个函数的action：

• 注意：这里不是返回一个对象了，而是一个函数；
• 该函数在dispatch之后会被执行；

export const fetchHomeMultidataAction = () => {
  // 如果是一个普通的action, 那么我们这里需要返回action对象
  // 问题: 对象中是不能直接拿到从服务器请求的异步数据的
  // return {}
​
  return function(dispatch, getState) {
    // 异步操作: 网络请求
    // console.log("foo function execution-----", getState().counter)
    axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
      const banners = res.data.data.banner.list
      const recommends = res.data.data.recommend.list
​
      // dispatch({ type: actionTypes.CHANGE_BANNERS, banners })
      // dispatch({ type: actionTypes.CHANGE_RECOMMENDS, recommends })
      dispatch(changeBannersAction(banners))
      dispatch(changeRecommendsAction(recommends))
    })
  }
​
  // 如果返回的是一个函数, 那么redux是不支持的
  // return foo
}

Redux-Devtools

redux官网为我们提供了redux-devtools的工具；

利用这个工具，我们可以知道每次状态是如何被修改的，修改前后的状态变化等等；

◼ 安装该工具需要两步：

• 第一步：在对应的浏览器中安装相关的插件（比如Chrome浏览器扩展商店中搜索Redux DevTools即可）；
• 第二步：在redux中继承devtools的中间件；

import { createStore, applyMiddleware, compose } from "redux"
import thunk from "redux-thunk"
import reducer from "./reducer"
​
// 正常情况下 store.dispatch(object)
// 想要派发函数 store.dispatch(function)
​
// redux-devtools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({trace: true}) || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)))
​
export default store

reducer的模块拆分

◼ 我们先来理解一下，为什么这个函数叫reducer？

◼ 我们来看一下目前我们的reducer：

import * as actionTypes from "./constants"
​
const initialState = {
  counter: 100,
  
  banners: [],
  recommends: []
}
​
function reducer(state = initialState, action) {
  switch (action.type) {
    case actionTypes.ADD_NUMBER:
      return { ...state, counter: state.counter + action.num }
    case actionTypes.SUB_NUMBER:
      return { ...state, counter: state.counter - action.num }
    case actionTypes.CHANGE_BANNERS:
      return { ...state, banners: action.banners }
    case actionTypes.CHANGE_RECOMMENDS:
      return { ...state, recommends: action.recommends }
    default:
      return state
  }
}
​
export default reducer

• 当前这个reducer既有处理counter的代码，又有处理home页面的数据；
• 后续counter相关的状态或home相关的状态会进一步变得更加复杂；
• 我们也会继续添加其他的相关状态，比如购物车、分类、歌单等等；
• 如果将所有的状态都放到一个reducer中进行管理，随着项目的日趋庞大，必然会造成代码臃肿、难以维护。

◼ 因此，我们可以对reducer进行拆分：

• 我们先抽取一个对counter处理的reducer；
• 再抽取一个对home处理的reducer；
• 将它们合并起来；

combineReducers函数

◼ 目前我们合并的方式是通过每次调用reducer函数自己来返回一个新的对象。

◼ 事实上，redux给我们提供了一个 combineReducers函数 可以方便的让我们对多个reducer进行合并：

import { createStore, compose, combineReducers } from "redux"
import { log, thunk, applyMiddleware } from "./middleware"
// import thunk from "redux-thunk"
​
import counterReducer from "./counter"
import homeReducer from "./home"
import userReducer from "./user"
​
// 正常情况下 store.dispatch(object)
// 想要派发函数 store.dispatch(function)
​
// 将两个reducer合并在一起
const reducer = combineReducers({
  counter: counterReducer,
  home: homeReducer,
  user: userReducer
})

◼ 那么combineReducers是如何实现的呢？

• 事实上，它也是将我们传入的reducers合并到一个对象中，最终返回一个combination的函数（相当于我们之前的reducer函数了）；
• 在执行combination函数的过程中，它会通过判断前后返回的数据是否相同来决定返回之前的state还是新的state；
• 新的state会触发订阅者发生对应的刷新，而旧的state可以有效的组织订阅者发生刷新；

// combineReducers实现原理(了解)
function reducer(state = {}, action) {
  // 返回一个对象, store的state
  return {  
    counter: counterReducer(state.counter, action),
    home: homeReducer(state.home, action),
    user: userReducer(state.user, action)
  }
}

ReduxToolkit

◼ Redux Toolkit 是官方最新推荐的编写 Redux 逻辑的方法。

• 在前面我们学习Redux的时候应该已经发现，redux的编写逻辑过于的繁琐和麻烦。
• 并且代码通常分拆在多个文件中（虽然也可以放到一个文件管理，但是代码量过多，不利于管理）；
• Redux Toolkit包旨在成为编写Redux逻辑的标准方式，从而解决上面提到的问题；
• 在很多地方为了称呼方便，也将之称为“RTK”；

◼ 安装Redux Toolkit：

pnpm install @reduxjs/toolkit react-redux

◼ Redux Toolkit的核心API主要是如下几个：

• configureStore：包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合你的 slice reducer，添加你提供的任何 Redux 中间件，redux-thunk默认包含，并启用 Redux DevTools Extension。
• createSlice：接受reducer函数的对象、切片名称和初始状态值，并自动生成切片reducer，并带有相应的actions。
• createAsyncThunk: 接受一个动作类型字符串和一个返回承诺的函数，并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk

ReduxToolkit重构

我们先对counter的reducer进行重构：通过createSlice创建一个slice。

◼ createSlice主要包含如下几个参数：

◼ name：用户标记slice的名词

• 在之后的redux-devtool中会显示对应的名词；

◼ initialState：初始化值

• 第一次初始化时的值；

◼ reducers：相当于之前的reducer函数

• 对象类型，并且可以添加很多的函数；

• 函数类似于redux原来reducer中的一个case语句；

• 函数的参数：

  • 参数一：state
  • 参数二：调用这个action时，传递的action参数；

◼ createSlice返回值是一个对象，包含所有的actions；

/store/features/counter.js

import { createSlice } from "@reduxjs/toolkit";
​
​
const counterSlice = createSlice({
  // 用户标记slice的名词
  name: "counter",
  // 初始值
  initialState: {
    counter: 888
  },
  // reduce函数
  reducers: {
    addNumber(state, { payload }) {
      state.counter = state.counter + payload
    },
    subNumber(state, { payload }) {
      // console.log("counter reducer subNumber", action);
      state.counter = state.counter - payload
    }
  }
})
​
// 导出actions方法
export const { subNumber, addNumber } = counterSlice.actions
​
// 导出counterSlice的reducer作为子reducer进行合并
export default counterSlice.reducer

store的创建

◼ configureStore用于创建store对象，常见参数如下：

• reducer，将slice中的reducer可以组成一个对象传入此处；
• middleware：可以使用参数，传入其他的中间件；
• devTools：是否配置devTools工具，默认为true；

import { configureStore } from "@reduxjs/toolkit";
​
import counterReducer from "./features/counter"
import homeReducer from "./features/home"
​
const store = configureStore({
  reducer: {
    counter: counterReducer,
    home: homeReducer
  }
})
​
export default store

ReduxToolkit异步

◼ 在之前的开发中，我们通过redux-thunk中间件让dispatch中可以进行异步操作。

◼ Redux Toolkit默认已经给我们继承了Thunk相关的功能：createAsyncThunk

export const fetchHomeMultidataAction = createAsyncThunk(
  "fetch/homemultidata",
  async (extraInfo, { dispatch, getState }) => {
    // extraInfo 是调用时传入的参数
​
    const res = await axios.get("http://123.207.32.32:8000/home/multidata")
    return res.data.data
  })

◼ 当createAsyncThunk创建出来的action被dispatch时，会存在三种状态：

• pending：action被发出，但是还没有最终的结果；
• fulfilled：获取到最终的结果（有返回值的结果）；
• rejected：执行过程中有错误或者抛出了异常；

◼ 我们可以在createSlice的entraReducer中监听这些结果：

  // fetchHomeMultidataAction 有三种状态，可以在fulfilled时期更改数据
  extraReducers: {
    [fetchHomeMultidataAction.pending](state, action) {
      console.log("fetchHomeMultidataAction pending");
    },
    [fetchHomeMultidataAction.fulfilled](state, { payload }) {
      console.log("fetchHomeMultidataAction fulfilled", payload);
      state.banners = payload.banner.list
      state.recommends = payload.recommend.list
    },
    [fetchHomeMultidataAction.rejected](state, actions) {
      console.log("fetchHomeMultidataAction rejected");
    }
  }

◼ extraReducers另一种写法 链式调用

  // extraReducers另一种写法 链式调用
  extraReducers: (builder) => {
    builder
      .addCase(fetchHomeMultidataAction.pending, (state, actions) => {
        console.log("fetchHomeMultidataAction pending");
      })
      .addCase(fetchHomeMultidataAction.fulfilled, (state, { payload }) => {
        console.log("fetchHomeMultidataAction fulfilled", payload);
        state.banners = payload.banner.list
        state.recommends = payload.recommend.list
      })
      .addCase(fetchHomeMultidataAction.rejected, (state, actions) => {
        console.log("fetchHomeMultidataAction rejected");
      })
  }

最新方案

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios"
​
// 获取异步数据
export const fetchHomeMultidataAction = createAsyncThunk(
  "fetch/homemultidata",
  async (extraInfo, { dispatch, getState }) => {
    // extraInfo 是调用时传入的参数
​
    // 1.发送网络请求
    const res = await axios.get("http://123.207.32.32:8000/home/multidata")
​
    // 2.取出数据，并且在此处直接dispatch数据(可以不做，在extraReducers里面做)
    const banners = res.data.data.banner.list
    const recommends = res.data.data.recommend.list
    dispatch(changeBanners(banners))
    dispatch(changeRecommends(recommends))
​
    // 3，返回结果，那么action状态会变成fulfilled状态
    return res.data.data
  })
​
const homeSlice = createSlice({
  name: "home",
  initialState: {
    banners: [],
    recommends: []
  },
  reducers: {
    changeBanners(state, { payload }) {
      state.banners = payload
    },
    changeRecommends(state, { payload }) {
      state.recommends = payload
    }
  }
})
​
export const { changeBanners, changeRecommends } = homeSlice.actions
​
export default homeSlice.reducer 

Redux Toolkit的数据不可变性

◼ 在React开发中，我们总是会强调数据的不可变性：

• 无论是类组件中的state，还是redux中管理的state；
• 事实上在整个JavaScript编码过程中，数据的不可变性都是非常重要的；

◼ 所以在前面我们经常会进行浅拷贝来完成某些操作，但是浅拷贝事实上也是存在问题的：

• 比如过大的对象，进行浅拷贝也会造成性能的浪费；
• 比如浅拷贝后的对象，在深层改变时，依然会对之前的对象产生影响；

◼ 事实上Redux Toolkit底层使用了immerjs的一个库来保证数据的不可变性。

◼ 在coderwhy公众号的一片文章中也有专门讲解immutable-js库的底层原理和使用方法：

• mp.weixin.qq.com/s/hfeCDCcod…

◼ 为了节约内存，又出现了一个新的算法：Persistent Data Structure（持久化数据结构或一致性数据结构）

• 用一种数据结构来保存数据；
• 当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费；

中间件的实现原理

◼ 当需要在store进行劫持处理时，就需要实现中间件

◼ 我们可以利用一个hack一点的技术：Monkey Patching，利用它可以修改原有的程序逻辑；

/store/index.js

import { log, thunk, applyMiddleware } from "./middleware"
​
applyMiddleware(store, log, thunk)

/store/middleware/index.js

统一出口

import log from "./log"
import thunk from "./thunk"
import applyMiddleware from "./applyMiddleware"
​
export {
  log,
  thunk,
  applyMiddleware
}

/store/middleware/log.js

监控派发dispatch

function log(store) {
  // 记录篡改之前的dispatch
  const next = store.dispatch
​
  function logAndDispatch(action) {
    console.log("当前派发的action:", action)
    // 真正派发的代码: 使用之前的dispatch进行派发
    next(action)
    console.log("派发之后的结果:", store.getState())
  }
​
  // monkey patch: 猴补丁 => 篡改现有的代码, 对整体的执行逻辑进行修改
  store.dispatch = logAndDispatch
}
​
export default log

/store/middleware/thunk.js

自己实现thunk功能

function thunk(store) {
  const next = store.dispatch
  function dispatchThunk(action) {
    if (typeof action === "function") {
      // 如果传入的是函数就直接执行（比如调起异步数据请求）
      action(store.dispatch, store.getState)
    } else {
      // 如果不是函数那就正常执行
      next(action)
    }
  }
  store.dispatch = dispatchThunk
}
​
export default thunk

/store/middleware/applyMiddleware.js

单个调用某个函数来合并中间件并不是特别的方便，我们可以封装一个函数来实现所有的中间件合并：

 function applyMiddleware(store, ...fns) {
  fns.forEach(fn => {
    fn(store)
  })
}
​
export default applyMiddleware

我们来理解一下上面操作之后，代码的流程：

React中的state如何管理

◼ 我们学习了Redux用来管理我们的应用状态，并且非常好用（当然，你学会前提下，没有学会，好好回顾一下）。

◼ 目前我们已经主要学习了三种状态管理方式：

• 方式一：组件中自己的state管理；
• 方式二：Context数据的共享状态；
• 方式三：Redux管理应用状态

◼ Redux的作者有给出自己的建议：

◼ 目前项目中我采用的state管理方案：

• UI相关的组件内部可以维护的状态，在组件内部自己来维护；
• 大部分