Redux 是一个非常流行的 JavaScript 状态管理库，但它的配置和使用却相对繁琐。Redux Toolkit 是一个官方提供的旨在简化 Redux 的工具包，它在使用上更加简单易懂，为开发者提供了更多的便利。
本文将带你了解 Redux Toolkit 的基础知识，从创建 Redux store 到使用 createAction 和 createSlice 简化 Redux 的操作。
安装 Redux Toolkit
要使用 Redux Toolkit，我们需要安装最新的版本。
npm install @reduxjs/toolkit
或者使用 yarn：
yarn add @reduxjs/toolkit
创建 Redux store
创建 Redux store 是一个非常重要的步骤。我们可以使用 createSlice 和 createAction 创建我们的 reducer，然后使用 configureStore 创建 store。
-- -------------------- ---- -------
------ - ------------ -------------- - ---- ------------------
----- ------------ - -------------
----- ----------
------------- --
--------- -
---------- ----- -- ----- - --
---------- ----- -- ----- - -
-
--
------ ----- - ---------- --------- - - --------------------
----- -------------- - --------------------
------ ------- ----------------
-------- -
-------- --------------
-
--上面的代码将创建一个名为 counter 的 reducer，包含 increment 和 decrement 两个 action。
我们可以使用 configureStore 创建 store，将 counterReducer 作为 reducer 传入，如下所示：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
----- ----- - ----------------
-------- -
-------- --------------
-
--
---------------------------
---------------------------如果我们没有错误，我们应该在控制台中看到相应的计数值。但是，这样做虽然能正常使用，但是不利于项目结构的管理。对于一个包含数个 reducer 的大型项目，我们需要一种更加组织化的方式来存储 reducer。
使用 createSlice 简化 reducer
Redux Toolkit 提供了一个 createSlice 函数来简化 reducer 的创建。我们可以基于 createSlice 创建一个 reducer，然后将 reducer 传递给 configureStore。
-- -------------------- ---- -------
------ - ------------ -------------- - ---- ------------------
----- ------------ - -------------
----- ----------
------------- --
--------- -
---------- ----- -- ----- - --
---------- ----- -- ----- - -
-
--
----- ----- - ----------------
-------- --------------------
--
------ ----- - ---------- --------- - - --------------------
------ ------- -----如上所示，我们可以直接传递 counterSlice.reducer 作为 reducer，而不是自己手动编写 reducer。
使用 createAction
createAction 是 Redux Toolkit 提供的一种简化 action 创建的方式。它简化了我们创建 action 和 action creator 的过程。
-- -------------------- ---- -------
-- --- ------------ ---
----- ---------------- - -------- -- -
------ -
----- --------------------
-------- ------
-
-
-- -- ------------ ---
----- ---------------- - ---------------------------------使用 createAction 后，我们可以仅仅使用一个字符串来创建 action。Redux Toolkit 会为我们自动生成一个 action creator 和一个 action。
const incrementCounter = createAction('counter/increment')
// 当我们调用 incrementCounter(2) 时，它将返回 { type: 'counter/increment', payload: 2 }总结
Redux Toolkit 是官方提供的一个用于简化 Redux 操作的工具包，可以大大提高开发效率。在本文中，我们介绍了如何使用 Redux Toolkit 创建 Redux store、如何使用 createSlice 函数简化 reducer 的创建、以及如何使用 createAction 简化 action 的创建。
当你开始使用 Redux Toolkit 时，你将发现 Redux 开发不再那么复杂，而且更容易维护和组织。如果你需要创建大型项目或需要快速创建 Redux 应用程序，Redux Toolkit 将是一个非常有用的工具。
示例代码：https://codesandbox.io/s/redux-toolkit-demo-lg67k
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659606ddeb4cecbf2d9ec9bd