前言
React 是一种用于构建用户界面的 JavaScript 库，Redux 是一个用于管理应用程序状态的 JavaScript 库。它们都是非常流行的前端框架，用于构建复杂的单页面应用程序。
在这篇文章中，我们将学习如何使用 React 和 Redux 构建一个简单的 TodoList 应用程序。我们将从零开始构建这个应用程序，并使用 React 和 Redux 的核心概念来管理应用程序的状态。
技术栈
在本文中，我们将使用以下技术栈：
- React - 用于构建用户界面的 JavaScript 库。
- Redux - 用于管理应用程序状态的 JavaScript 库。
- React-Redux - 用于将 React 和 Redux 集成在一起的库。
- Redux Toolkit - 用于简化 Redux 开发的库。
环境搭建
首先，我们需要安装 Node.js 和 npm。你可以在 Node.js 官网上下载最新版本的 Node.js 和 npm。
接下来，我们将创建一个新的 React 应用程序。我们可以使用 create-react-app 工具来创建一个新的 React 应用程序。
npx create-react-app todo-list-app cd todo-list-app
在创建新应用程序后，我们需要安装 Redux 和 React-Redux。
npm install --save redux react-redux
Redux 的核心概念
在进入 TodoList 应用程序的构建之前，我们需要先了解 Redux 的核心概念。
Store
Store 是 Redux 中的一个对象，它包含应用程序的状态。我们可以使用 Redux 提供的 createStore 函数来创建一个 Store。
import { createStore } from 'redux';
const store = createStore(reducer);Action
Action 是一个普通的 JavaScript 对象，它描述了发生了什么事件。每个 Action 都有一个 type 属性，它指定了 Action 的类型。
const ADD_TODO = 'ADD_TODO';
const action = {
type: ADD_TODO,
payload: {
text: 'Buy milk',
},
};Reducer
Reducer 是一个纯函数，它接收先前的状态和 Action，并返回新的状态。
-- -------------------- ---- -------
----- ------------ - -
------ ---
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
------ ---------------- ----------------
--
--------
------ ------
-
-Dispatch
Dispatch 是一个函数，它接收一个 Action，并将其发送到 Store。当 Dispatch 被调用时，Store 会调用 Reducer 并更新状态。
store.dispatch(action);
Selector
Selector 是一个函数，它接收全局状态并返回一个子状态。我们可以使用 Selector 来获取 Store 中的数据。
function getTodos(state) {
return state.todos;
}构建 TodoList 应用程序
现在我们已经了解了 Redux 的核心概念，让我们开始构建 TodoList 应用程序。
设计状态
首先，我们需要设计应用程序的状态。我们的应用程序将具有以下状态：
- todos - 一个包含所有 Todo 的数组。
- filter - 当前选定的过滤器。
const initialState = {
todos: [],
filter: 'All',
};创建 Action
接下来，我们需要创建 Action。我们将创建以下 Action：
- ADD_TODO - 用于添加新的 Todo。
- TOGGLE_TODO - 用于切换 Todo 的完成状态。
- SET_FILTER - 用于设置过滤器。
-- -------------------- ---- -------
----- -------- - -----------
----- ----------- - --------------
----- ---------- - -------------
--- ---------- - --
------ -------- ------------- -
------ -
----- ---------
-------- -
--- -------------
-----
---------- ------
--
--
-
------ -------- -------------- -
------ -
----- ------------
-------- -
---
--
--
-
------ -------- ----------------- -
------ -
----- -----------
-------- -
-------
--
--
-创建 Reducer
接下来，我们需要创建 Reducer。我们的 Reducer 将处理上述 Action。
-- -------------------- ---- -------
----- ------------ - -
------ ---
------- ------
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ---------
------ -
---------
------ ---------------- ----------------
--
---- ------------
------ -
---------
------ ---------------------- --
------- --- -----------------
- - -------- ---------- --------------- -
- ----
--
--
---- -----------
------ -
---------
------- ----------------------
--
--------
------ ------
-
-创建 Store
接下来，我们需要创建 Store。我们将使用 Redux Toolkit 来创建 Store。
import { configureStore } from '@reduxjs/toolkit';
import reducer from './reducer';
const store = configureStore({
reducer,
});
export default store;创建组件
接下来，我们需要创建组件。我们将创建以下组件：
- TodoList - 用于显示所有 Todo 的列表。
- TodoItem - 用于显示单个 Todo。
- AddTodo - 用于添加新的 Todo。
- Filter - 用于选择过滤器。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - -------- ----------- --------- - ---- ------------
-------- ---------- -
----- ----- - ------------------- -- -------------
----- ------ - ------------------- -- --------------
----- -------- - --------------
----- ------------- -
------ --- -----
- -----
- ------ --- --------
- ------------------- -- ----------------
- ------------------- -- ----------------
------ -
-----
----
------------------------- -- -
--------- ------------- ----------- --
---
-----
-------- --
------- --------------- ------------------- -- ---------------------------- --
------
--
-
-------- ---------- ---- -- -
----- -------- - --------------
------ -
----
------
---------------
------------------------
------------ -- ------------------------------
--
------------------------
-----
--
-
-------- --------- -
----- ------ -------- - -------------------
----- -------- - --------------
-------- ------------------- -
-----------------------
------------------------
------------
-
------ -
----- ------------------------
------ ------------ ----------------- -- ---------------------------- --
------- ----------------- -------------
-------
--
-
-------- -------- ------- --------- -- -
------ -
-----
------- ----------- -- ----------------- ---------------- --- -------
---
---------
------- ----------- -- -------------------- ---------------- --- ----------
------
---------
------- ----------- -- ----------------------- ---------------- --- -------------
---------
---------
------
--
-
------ ------- ---------渲染应用程序
最后，我们需要渲染我们的应用程序。我们将在 index.js 文件中渲染应用程序。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ -------- ---- -------------
----------------
--------- --------------
--------- --
------------
-------------------------------
--总结
在本文中，我们学习了如何使用 React 和 Redux 构建一个简单的 TodoList 应用程序。我们了解了 Redux 的核心概念，包括 Store、Action、Reducer、Dispatch 和 Selector。我们还使用了 Redux Toolkit 来简化 Redux 的开发。
这个 TodoList 应用程序是一个非常简单的示例，但它演示了如何使用 React 和 Redux 构建复杂的单页面应用程序。如果你正在学习 React 和 Redux，这个应用程序将是一个很好的起点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657ade71d2f5e1655d55c38e