更新 Redux 至 v4.x 后，它的改变有哪些？-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个非常流行的状态管理库，它的稳定性和可靠性一直备受开发者的认可和青睐。最近，Redux 发布了一个新的版本——v4.x，这个版本相比于之前的版本更加稳定且有了很多的重大改动。本文将会详细的探讨 Redux 至 v4.x 版本的改变。

1. 引入 Redux Toolkit

Redux Toolkit 是一个为 Redux 提供的官方工具集，它的引入大大简化了Redux应用的模板代码。通过 Redux Toolkit，你可以快速、简单地进行状态的管理，而无需编写大量的样板代码。它主要提供了以下功能：

createSlice：快速定义 Reducer 和 Action
createAction：快速创建 Action
createAsyncThunk：利用 Promise 处理异步请求
createEntityAdapter：可用于操作实体数据的实用程序函数集合

2. 类型改进

Reduxv4.x中引入了一些新的类型改进和增强，包括：

TypeScript 支持改进：Reduxv4.x 现在与 TypeScript 更紧密地集成，你可以通过使用 TypeScript 进行更准确地类型检查。
TypeScript 泛型支持：Reduxv4.x 提供了针对每个常见的 Redux API 的 TypeScript 泛型支持，这样就可以更好地应用类型推断和错误检查。
PayloadAction 类型：这个类型现在是 Reducer 创建时最常用的传递操作有效载荷的方式。Reduxv4.x 为PayloadAction类型添加了属性，以提高类型可用性。
createAsyncThunk 中的rejectedPayload属性：该属性是createAsyncThunk 的一个重要新属性，可以在返回错误后向 Redux存有限数据作为有效负载。

3. state共享更加灵活

在 Redux v4.x 中，使用 combineReducers 函数合并 reducers 时的行为有所改变。旧的合并方式不允许在根状态树中重新定义子状态的键。在 v4.x 版本中，你可以在 createSlice 中传递新的 name 参数，它会为你创建状态特定的 reducer 和 action type 前缀，并且支持在 Redux 状态树中重新设置状态的 key。

举个例子，你原本可能会编写以下代码，使用 combineReducers 函数将不同的 Reducer 组合在一起：

// javascriptcn.com 代码示例
import { combineReducers } from 'redux';
import todosReducer from './todos';
import visibilityFilterReducer from './visibilityFilter';

const rootReducer = combineReducers({
  todos: todosReducer,
  visibilityFilter: visibilityFilterReducer,
});

export default rootReducer;

在 v4.x 版本中，你可以使用 createSlice 函数返回的 reducer，使用 name 参数为每个 reducer 设置唯一的名称：

// javascriptcn.com 代码示例
import { createSlice } from '@reduxjs/toolkit';

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    },
  },
});

const visibilityFilterSlice = createSlice({
  name: 'visibilityFilter',
  initialState: 'SHOW_ALL',
  reducers: {
    setVisibilityFilter: (state, action) => {
      return action.payload.filter;
    },
  },
});

export const { addTodo } = todosSlice.actions;
export const { setVisibilityFilter } = visibilityFilterSlice.actions;

export const rootReducer = {
  todos: todosSlice.reducer,
  visibilityFilter: visibilityFilterSlice.reducer,
};

上述代码中的createSlice 函数生成了 todosSlice.reducer 和 visibilityFilterSlice.reducer 两个 reducer 以及 addTodo 和 setVisibilityFilter 两个 action。这种方式使得createSlice 中的抽象变得更加简单，可以在组件层次上更方便地组织状态。

4. 性能大幅提升

相比于之前的版本，Redux v4.x 的性能有了非常大的提升。这得益于许多不断改进和精细调整后的内部实现细节。Redux v4.x 可以在现代浏览器和 Node.js 上运行得更快。如果你在之前使用 Redux 时因性能问题而犯愁，那么升级至 v4.x 版本应该是你的不二之选。在实际开发中Redis v4.x的提高性能能极大的加速应用中状态管理的开发和生产，并提高组件渲染速度。

5. 总结

Redux v4.x 有很多改进和新的特性。引入 Redux Toolkit，类型改进, 对 state 共享方式的灵活性做出调整，性能提升等是开发者最关注的方面。随着时间的推移，Redux 会成为前端应用的必备工具之一。我们可以看出 Redux 的发展已经非常的完善，涵盖了业界中大部分的需求和使用场景。本文旨在提出升级至 v4.x 的价值和必要性，希望能够更好地指导 Redux 应用的开发和生产工作的进行。

完整示例代码可以查看下面的 Github 链接：

https://github.com/reduxjs/redux/releases/tag/v4.0.0

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6529090f7d4982a6ebb9c0f9