React 是一种用于构建用户界面的 JavaScript 库,而 Redux 是一个用于管理应用程序状态的库。它们广泛被用于现代 web 应用程序中,因为它们提供了高效、可重用的代码组织方式。
基础知识
React 的核心思想是组件化。每个组件都有自己的状态和属性,它们可以被动态地更新以响应用户的输入或其他事件。为了使组件之间共享数据,我们可以使用 Redux 来管理应用程序的全局状态。Redux 使用单一的全局 store 来保存所有的状态,并提供了一些工具来处理数据变化并保持应用程序的一致性。
实战演练
在本节中,我们将构建一个简单的 Todo List 应用程序,以展示如何使用 React 和 Redux 进行实战开发。
步骤 1:创建 React 应用程序
首先,我们需要安装并创建一个新的 React 应用程序。我们可以使用 Create React App 工具快速启动项目:
--- ---------------- ------------
这会在当前目录下创建一个名为 my-todo-list
的新项目文件夹。
步骤 2:添加 Redux
接下来,我们将添加 Redux 并设置基本的 store。我们需要安装以下依赖项:
--- ------- ------ ----- -----------
然后,在 src
目录下创建一个新文件夹 store
,并添加一个名为 index.js
的新文件。这个文件将包含我们的全局状态和 Redux 配置。
------ - ----------- - ---- -------- ----- ------------ - - ------ --- -- -------- ----------------- - ------------- ------- - ------ ------------- - ---- ----------- ------ - --------- ------ ---------------- ---------------- -- ---- -------------- ------ - --------- ------ ----------------------- -- ------- --- ---------------- -- -------- ------ ------ - - ------ ----- ----- - -------------------------
在这个文件中,我们首先定义了初始状态 initialState
,它只包含一个空数组 todos
。然后,我们编写了一个叫做 rootReducer
的函数,它会根据不同的 action 类型更新状态。在这个例子中,我们只有两种类型的 action:ADD_TODO
和 REMOVE_TODO
。当我们收到一个 ADD_TODO
操作时,我们将新的待办事项添加到 todos
数组中;当我们收到一个 REMOVE_TODO
操作时,我们将该待办事项从数组中删除。
最后,我们使用 createStore
函数从 rootReducer
创建了一个新的 store,并将其导出以供其他模块使用。
步骤 3:添加 React 组件
现在我们已经设置好了 Redux,我们可以开始编写我们的第一个 React 组件。在 src
目录下创建一个新文件夹 components
,并添加一个名为 TodoList.js
的新文件。这个组件将渲染我们的 Todo List 并与 Redux store 进行交互。
------ ------ - -------- - ---- -------- ------ - ------------ ----------- - ---- -------------- -------- ---------- - ----- ------ -------- - ------------- ----- ----- - ----------------- -- ------------- ----- -------- - -------------- -------- --------------- - -- ------ - ---------- ----- ----------- -------- - --- ----------- ----- -- --- ------------ - - -------- -------------------- - ---------- ----- -------------- -------- --- --- - ------ - ----- ------ ------------ ----------- -- ------------------------ -- ------- ------------------------------------ ---- --------------- - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------