Redux 是全球受欢迎的 JavaScript 状态管理库，它是 React 应用程序的主要状态管理方案。在 TypeScript 的应用中使用 Redux，可以帮助我们更好地管理应用的状态。本文将介绍如何在 TypeScript 中使用 Redux 框架，并提供示例代码和指导意义。
React Redux 和 Redux Toolkit 的安装
在开始之前，我们需要安装 React Redux 和 Redux Toolkit 包。可以通过以下命令来安装它们：
npm install --save react-redux npm install --save @reduxjs/toolkit
在安装完成后，我们可以开始使用这些包来管理应用状态。
创建 Store
在 Redux 中，唯一可以改变状态的方法是通过触发一个 action。为了在 TypeScript 中管理应用状态，我们需要定义 actions 和 reducers，这些都必须是强类型的对象。
首先，我们需要创建 store，也就是应用的状态库。我们可以使用 createSlice 函数来创建自己的 slice 和 reducers，它内置了一些标准的 reducer 逻辑。具体来说，我们需要执行以下步骤：
- 引入 createSlice 和 configureStore 函数
import { createSlice, configureStore } from '@reduxjs/toolkit';- 定义 initialState 和 reducers
-- -------------------- ---- -------
--------- ------------ -
------ -------
-
----- ------------- ------------ - - ------ - --
----- ------------ - -------------
----- ----------
-------------
--------- -
---------- ------- -- -
----------- -- --
--
---------- ------- -- -
----------- -- --
--
------ ------- -- -
----------- - --
--
--
---在上面的代码中，我们定义了一个名为 counter 的 reducer 切片。这个切片包含名为 increment、decrement 和 reset 的三个 actions，它们被用于修改存储在应用中的 value 属性的值。
- 创建 store
const store = configureStore({
reducer: counterSlice.reducer,
});在上面的代码中，我们通过传递我们的 reducer 函数来创建一个 Redux store。现在我们就可以使用 store 来管理应用状态了。
描述 Store 使用的内容
在使用 store 之前，我们需要明确其在应用程序中的作用。Redux 中的 store 为我们提供了一种统一管理状态的机制，它给我们提供了一个通用的 API，并将所有修改操作限制为通过 action 进行。这使得我们能够轻松跟踪 如何影响应用程序状态的所有操作的流程。
你可以将比如说所有对命名为 counter 的 reducer 都定义在一个 ts 文件中，这些 reducer 按需使用，并在你的 store 中添加它们。
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
const store = configureStore({
reducer: {
counter: counterReducer,
},
});在定义这些 reducer 时，可以细分成更小的 reducers，每个 reducer 管理一个状态变化，这样可以在 Redux DevTools 中更好地跟踪应用程序状态的流程。
在组件中使用 Store
在我们已经定义好了 store 和 reducers 后，我们可以在组件中使用它们。我们可以使用 hooks 或 Redux 的 connect 函数来访问 store。
使用 Hooks
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - ---------- ---------- ----- - ---- -----------------
------ -------- --------- -
----- -------- - --------------
----- ----- - ------------------- ---------- -- ---------------------
------ -
-----
------------------
------- ----------- -- ---------------------------------
------- ----------- -- ---------------------------------
------- ----------- -- ---------------------------------
------
--
-在上面的代码中，我们使用了 useSelector 钩子来订阅 counter 值，并使用 useDispatch 钩子来派发 actions。这些钩子让我们使用 Redux 更加方便。
使用 Connect
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------- ---------- ----- - ---- -----------------
--------- ------------ -
------ -------
---------- -- -- -----
---------- -- -- -----
------ -- -- -----
-
-------- --------- ------ ---------- ---------- ----- -- ------------- -
------ -
-----
------------------
------- ------------------------------
------- ------------------------------
------- ------------------------------
------
--
-
----- --------------- - ------- ---------- -- --
------ --------------------
---
----- ------------------ - -
----------
----------
------
--
------ ------- ------------------------ -----------------------------在上面的代码中，我们使用了 connect 函数来将 counter 值和操作派发到组件的 props 中，而不是使用 hooks。这使得我们将 Redux 与 React 组件配对了起来，并使得我们更好地掌控了组件的行为。
结论
使用 TypeScript 和 Redux 来编写 React 应用程序非常有用，它主要是在提供对应用程序的状态的统一访问。在本文中，我们已经介绍了如何在 TypeScript 中使用 Redux 和 React-Redux，而且也给出了一些代码示例和建议。我相信，这些方案将让您更好地管理应用程序的状态，并进一步简化您的开发过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6732d0490bc820c5823efed8