React&Redux实战

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_TODOREMOVE_TODO。当我们收到一个 ADD_TODO 操作时,我们将新的待办事项添加到 todos 数组中;当我们收到一个 REMOVE_TODO 操作时,我们将该待办事项从数组中删除。

最后,我们使用 createStore 函数从 rootReducer 创建了一个新的 store,并将其导出以供其他模块使用。

步骤 3:添加 React 组件

现在我们已经设置好了 Redux,我们可以开始编写我们的第一个 React 组件。在 src 目录下创建一个新文件夹 components,并添加一个名为 TodoList.js 的新文件。这个组件将渲染我们的 Todo List 并与 Redux store 进行交互。

------ ------ - -------- - ---- --------
------ - ------------ ----------- - ---- --------------

-------- ---------- -
  ----- ------ -------- - -------------
  ----- ----- - ----------------- -- -------------
  ----- -------- - --------------

  -------- --------------- -
    -- ------ -
      ----------
        ----- -----------
        -------- -
          --- -----------
          -----
        --
      ---
      ------------
    -
  -

  -------- -------------------- -
    ----------
      ----- --------------
      -------- ---
    ---
  -

  ------ -
    -----
      ------ ------------ ----------- -- ------------------------ --
      ------- ------------------------------------
      ----
        ---------------

- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------