番茄酱
主 题

资源记录

配置

  1. create react App加craco可支持扩展配置
  2. react-redux redux-persist immer redux-promise redux-thunk配套使用，其中promise和thunk类似的

常见问题

1.使用副作用函数useEffect(比如请求数据)，记得传第二个参数不然会造成无限循环。

2.redux中reducer为什么要是个纯函数？

language 复制代码 
import { AnyAction } from '@reduxjs/toolkit';
import { GlobalState } from '@/redux/interface';
import * as types from '@/redux/mutation-types';
const globalState: GlobalState = {
  token: '',
  userInfo: '',
};
/**
 * @description:  global reducer 内部已经使用了immer不用手动使用
 * 不能修改旧state，必须先拷贝一份state，再进行修改，也可以使用Object.assign函数生成新的state
 * 永远不要在 reducer 里做这些操作：修改传入参数；执行有副作用的操作，
 * 如 API 请求和路由跳转；调用非纯函数，如 Date.now() 或 Math.random()；
 * @param {GlobalState} state
 * @param {AnyAction} action
 * @return {GlobalState}
 */
const global = (state: GlobalState = globalState, action: AnyAction) => {
  // console.log(action);
  switch (action.type) {
    case types.SET_TOKEN:
      return {
        ...state,
        token: action.token,
      };
    case types.SET_USER_INFO:
      return {
        ...state,
        userInfo: action.userInfo,
      };
    default:
      // 必须返回state
      return state;
  }
};
export default global;

**答：**Redux中的reducer必须是一个纯函数，这是因为Redux的设计思想是单向数据流，即state只能通过dispatch一个action来改变，而reducer就是用来处理这个action的。如果reducer不是纯函数，就会导致state的变化不可预测，从而破坏了Redux的单向数据流的设计思想。

纯函数的定义是：给定相同的输入，总是返回相同的输出，且没有任何副作用。在Redux中，reducer必须满足这个定义，因为它的输入是当前的state和一个action，输出是一个新的state。如果reducer不是纯函数，就可能会修改传入的state，或者执行有副作用的操作，如API请求和路由跳转，这都会导致state的变化不可预测。

在给定的代码中，我们可以看到reducer是一个纯函数，它接收一个state和一个action，然后返回一个新的state。在switch语句中，它根据action的type来决定如何更新state。例如，当action的type是SETTOKEN时，它会返回一个新的state，其中token被更新为action.token。这种方式保证了state的变化是可预测的，因为它只取决于action的type和payload，而不是任何其他因素。

因此，Redux中的reducer必须是一个纯函数，这是为了保证state的变化是可预测的，从而实现Redux的单向数据流的设计思想。

全部评论(0)