React 是一个高效、灵活且强大的 JavaScript 库,广泛应用于构建 Web 应用程序。Redux 是一个可预测的状态容器,帮助管理 React 应用程序的状态。在本教程中,我们会教授您如何结合 React 和 Redux 来打造复杂的 SPA 应用。
前置知识
在开始本教程前,你需要具备以下知识:
- 基本的 HTML、CSS 和 JavaScript 知识。
- 了解 React 和 Redux 的基本概念和语法。
- 熟悉 Node.js 和 NPM。
如果你还不熟悉上面列举的知识点,可以先学习官方文档或者其他的学习资源来获取相关知识的。
准备工作
我们将使用 create-react-app 工具来初始化我们的项目。如果你没有安装该工具,请先安装它:
npm install -g create-react-app
安装完成后,在命令行中执行以下命令,创建一个新项目:
create-react-app my-app cd my-app
这个命令将创建一个新的 React 应用程序,其中包含一些示例代码和配置文件。
接着,我们需要安装一些必要的依赖项:
npm install react-redux redux redux-thunk --save
react-redux
: 提供了一个 React 组件,帮助我们在 React 应用程序中使用 Redux。redux
: 状态管理器,帮助我们管理和维护应用程序状态。redux-thunk
: Redux 的中间件,帮助我们处理异步操作。
编写应用程序
在这个示例应用程序中,我们将创建一个 todoList 应用程序。该应用程序允许用户添加、编辑和删除任务。
该应用程序将包含以下组件:
TodoList
:显示任务列表。TodoForm
:用于添加或编辑任务。
我们需要首先创建一个 Redux store,包含一个初始状态和一些组件可以更新该状态。在 src
目录下的 index.js
文件中,添加以下代码:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - -------- - ---- -------------- ------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ --- ---- -------- ------ -------- ---- ------------- ----- ----- - --------------------- ------------------------ ---------------- --------- -------------- ---- -- ------------ ------------------------------- --
我们使用 createStore()
方法来创建一个新的 Redux store,传递应用程序的初始状态和中间件 thunk
。
接着,我们将使用 Provider
来包装我们的应用程序,以便每个组件都能够使用 Redux store。Provider
是一个高阶组件,用于向 React 应用程序提供 Redux store。
最后,在 src
目录下创建一个 reducers.js
文件,用于处理应用程序状态的更新:
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ----- ----------- - ------ - - ------ -- -- ------- -- - ------ ------------- - ---- ----------- ------ - --------- ------ ---------------- --------------- -- ---- ------------ ------ - --------- ------ ---------------------- -- ------- --- ----------------- - -------------- - ---- -- -- ---- -------------- ------ - --------- ------ ------------------------- -- ------- --- ------------------- -- -------- ------ ------ - -- ------ ------- ----------------- ------------ ---
我们定义了一个名为 todoReducer
的 reducer,用于处理应用程序状态的更新。combineReducers()
方法将多个 reducer 组合成一个根 reducer,并在 Store 中将其作为单个函数使用。
接下来,我们将编写具体的组件。
TodoList
TodoList
组件用于显示任务列表,它将从 Redux store 中获取任务列表并将其显示出来。代码如下:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- -------------- ------ -------- ---- ------------- ----- -------- - -- ----- -- -- - ------ - ----- -------- --------- ----------------- -- - --------- ------------- ----------- -- --- ------ -- -- ----- --------------- - ------- -- - ------ - ------ ------------------------ -- -- ------ ------- -----------------------------------
我们使用 connect()
方法将 TodoList
组件与 Redux store 连接。mapStateToProps
函数用来将 store 中的 state 映射到组件的 props 属性中。
当我们添加、编辑或删除任务时,TodoList
组件将自动更新任务列表,因为它已连接到 Redux store 中的 todos
数据。
TodoItem
TodoItem
组件用于显示单个任务和提供编辑和删除任务的选项。代码如下:
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ------- - ---- -------------- ------ - ----------- -------- - ---- ------------- ----- -------- - -- ----- -------- -- -- - ----- --------- ----------- - ---------------- ----- ------- --------- - --------------------- ----- ---------- - -- -- - ----------------- -- ----- ---------- - -- -- - ------------------- -------- ----- ---- ------------------ -- ----- ------------ - -- -- - --------------------------- -- ----- ------------ - --- -- - ------------------------- -- ------ - ----- -------- - - ------ ----------- ------------- ----------------------- -- - - - ---------- -- ------- ---------------------------------- ------- -------------------------------------- -------- -- ------- ----------------------------------- ------ -- -- ------ ------- --------------------
我们使用 connect()
方法将 TodoItem
组件连接到 Redux store。我们还引入了两个操作:deleteTodo
和 editTodo
。这两个操作调用 store.dispatch() 方法来更新 Redux store。
当我们点击“编辑”按钮时,editing
状态将设置为 true,从而在 <input>
中显示任务的当前标题。当用户单击“保存”按钮时,我们将调用 editTodo
操作,并将 store 中的任务数据更新为新数据。
当点击“删除”按钮时,我们将调用 deleteTodo
操作,其将从 store 中删除选定的任务数据。
TodoForm
TodoForm
组件用于添加和编辑任务。这个组件也需要和 Redux store 进行交互,以便能够添加新的任务数据。
代码如下:
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ------- - ---- -------------- ------ - ------- - ---- ------------- ----- -------- - -- -------- -- -- - ----- ------- --------- - ------------- ----- ------------ - --- -- - ------------------- -- ------------- --- --- - ------- - ------------------ --- ----------- ------ ---- ------------- -- ----- ------------ - --- -- - ------------------------- -- ------ - ----- ------------------------ ------ ----------- ------------- ----------------------- -- ------- ----------------- ------------- ------- -- -- ------ ------- --------------------
我们使用 connect()
方法将 TodoForm
组件连接到 Redux store。当我们添加新的任务时,我们将title
信息传递给 addTodo
操作,将新任务添加到 store 中。
结论
React 和 Redux 组合在一起后,可以轻松管理您的应用程序状态,从而使代码更加可维护和可扩展。借助 Redux 的可预测性,您可以更轻松地调试和测试代码,并且可以清晰地了解应用程序状态的更改。
这个示例应用程序只是针对 React 和 Redux 的简单实践,您可以使用相同的思路构建更复杂的应用程序。如果您遇到了具体的问题,请查看官方文档或寻求相关帮助来获取更详细的解答。
示例代码
根据以上的编写,您可以在 Github 上查阅完整的示例代码:
https://github.com/ysqyq/react-redux-todo-app
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67499e44a1ce00635469c848