Redux 是一种用于 JavaScript 应用程序的可预测状态容器，它可以帮助你管理应用程序的状态，并使其易于调试和维护。而 TypeScript 是一个强类型的 JavaScript 超集，它可以使开发者在编写代码时发现错误，并提供更好的编辑器支持。将 Redux 和 TypeScript 结合使用，可以使代码更加稳健和可维护。
本教程将带领你创建一个使用 Redux 和 TypeScript 的实时搜索应用程序。在这个过程中，你将学习如何配置 Redux 和 TypeScript，如何编写符合类型约束的 Redux reducers 和 actions，以及如何在 React 中使用这些 reducers 和 actions。
1. 设置项目环境
在开始之前，我们需要设置项目环境。我们将使用 create-react-app 来快速搭建项目。
首先，打开终端并输入以下命令：
npx create-react-app redux-typescript-tutorial --template typescript
这个命令将使用 create-react-app 创建一个名为 redux-typescript-tutorial 的项目，并使用 TypeScript 作为模板。
等待命令完成后，进入项目文件夹：
cd redux-typescript-tutorial
2. 配置 Redux
我们将使用 redux 和 react-redux 库来管理应用程序的状态。运行以下命令来安装它们：
npm install redux react-redux
接下来，我们需要创建一个 Redux store。在 src 文件夹下创建一个新文件夹 store。在这个文件夹下，创建一个新文件 index.ts。在这个文件中，我们将初始化 Redux store 并导出它。
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;我们这里使用 rootReducer 作为我们的应用程序的 reducer，下一步我们将创建它。
在 store 文件夹下，创建一个新文件夹 reducers。在这个文件夹下，创建一个新文件 index.ts。这个文件将包含我们的应用程序的 reducer。
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
// TODO: Add reducers here
});
export default rootReducer;我们现在已经初始化了 Redux store 并创建了一个根 reducer。接下来，我们将在 reducers 文件夹下添加一些 reducer。
在 reducers 文件夹下，创建一个新文件 search.ts。这个文件将包含我们的搜索 reducer。
-- -------------------- ---- -------
------ - ------- - ---- --------
--------- ----------- -
------ -------
-
----- ------------- ----------- - -
------ ---
--
----- -------------- -------------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------
------ -
---------
------ ---------------
--
--------
------ ------
-
--
------ ------- --------------在这个 reducer 中，我们定义了一个 SearchState 接口来描述应用程序的搜索状态，包含一个名为 query 的字符串属性。在 reducer 中，我们返回一个新的搜索状态对象，其中 query 属性设置为 action 的 payload 值。
接下来，我们需要将这个 reducer 添加到我们的根 reducer 中。回到 reducers/index.ts 文件，添加以下代码：
import { combineReducers } from 'redux';
import searchReducer from './search';
const rootReducer = combineReducers({
search: searchReducer,
});
export default rootReducer;现在我们的根 reducer 包含了一个 search reducer。我们已经完成了 Redux 的配置。
3. 编写 actions
接下来，我们需要编写 actions，这些 actions 用于修改 Redux store 中的状态。我们使用 TypeScript 来确保我们的 actions 符合特定的类型模式。
在 store 文件夹下，创建一个新文件夹 actions。在这个文件夹下，创建一个新文件 search.ts。这个文件包含一些定义搜索 action 的 TypeScript 类型和创造这些 action 的函数。
-- -------------------- ---- -------
------ --------- ----------------- -
----- ---------------
-------- -------
-
------ ---- ------------ - ------------------
------ -------- ------------------ -------- ----------------- -
------ -
----- ---------------
-------- ------
--
-在这个文件中，我们定义了一个名为 UpdateQueryAction 的 TypeScript 接口，用于描述更新搜索查询的 action。我们还定义了一个 SearchAction 类型，它是定义在我们的应用程序中可以派发的所有 actions 的联合类型。最后，我们定义了一个名为 updateQuery 的函数，它返回一个 UpdateQueryAction 对象，用于将新的搜索查询更新到 Redux store 中。
现在我们已经完成了 actions 的编写。
4. 在 React 中使用 Redux
现在我们已经完成了 Redux 的配置和 actions 的编写，我们可以开始在 React 组件中使用 Redux 了。
在 src 文件夹下，创建一个新文件夹 components。在这个文件夹下，创建一个新文件 SearchInput.tsx。这个组件用于渲染一个包含搜索输入框的组件，并将用户输入的搜索查询更新到 Redux store 中。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- - ---- --------------
------ - ----------- - ---- --------------------------
----- ------------ -------- - -- -- -
----- ------- --------- - -------------
----- -------- - --------------
-------- ------------------- ------------------------------------ -
-----------------------------
-
-------- -------------- -
-----------------------------
-
------ -
-----
------ ----------- ------------- ----------------------- --
------- --------------------------------------
------
--
--
------ ------- ------------在组件中，我们使用 React.useState 以及 React.useDispatch hook 来更新组件的状态和发送更新 Redux store 的 action。我们为输入框添加了一个 onChange 事件处理程序来更新查询，并在 Search 按钮点击时调用 updateQuery action。
现在，我们已经完成了在 React 组件中使用 Redux 的全部配置。
5. 完整代码
下面是我们的完整代码，包含上面提到的所有文件和代码：
src/store/actions/search.ts
-- -------------------- ---- -------
------ --------- ----------------- -
----- ---------------
-------- -------
-
------ ---- ------------ - ------------------
------ -------- ------------------ -------- ----------------- -
------ -
----- ---------------
-------- ------
--
-src/store/reducers/search.ts
-- -------------------- ---- -------
------ - ------- - ---- --------
--------- ----------- -
------ -------
-
----- ------------- ----------- - -
------ ---
--
----- -------------- -------------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------
------ -
---------
------ ---------------
--
--------
------ ------
-
--
------ ------- --------------src/store/reducers/index.ts
import { combineReducers } from 'redux';
import searchReducer from './search';
const rootReducer = combineReducers({
search: searchReducer,
});
export default rootReducer;src/store/index.ts
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;src/components/SearchInput.tsx
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- - ---- --------------
------ - ----------- - ---- --------------------------
----- ------------ -------- - -- -- -
----- ------- --------- - -------------
----- -------- - --------------
-------- ------------------- ------------------------------------ -
-----------------------------
-
-------- -------------- -
-----------------------------
-
------ -
-----
------ ----------- ------------- ----------------------- --
------- --------------------------------------
------
--
--
------ ------- ------------6. 结论
在本教程中，我们学习了如何在 Redux 中使用 TypeScript，并使用一个实时搜索应用程序作为示例来演示如何编写类型安全的 reducers 和 actions。我们还了解了如何在 React 组件中使用 Redux，以及如何将用户输入更新到 Redux store 中。
通过将 Redux 和 TypeScript 结合使用，我们可以确保应用程序的状态始终符合类型约束，并且代码更加健壮和易于维护。我希望这个教程能够帮助你更好地理解如何在 TypeScript 中使用 Redux，以及如何将 Redux 和 TypeScript 结合使用来构建具有类型安全的 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6714af9dad1e889fe21509c4