React 18 迁移状态逻辑至 Reducer 中

最新推荐文章于 2023-09-06 10:16:10 发布
最新推荐文章于 2023-09-06 10:16:10 发布
阅读量896 收藏
点赞数
分类专栏： react 文章标签： useReducer useImmerReducer 使用reducer整合状态逻辑 reducer dispatch action
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jyn15159/article/details/132617102
版权

参考文章

迁移状态逻辑至 Reducer 中

对于拥有许多状态更新逻辑的组件来说，过于分散的事件处理程序可能会令人不知所措。对于这种情况，可以将组件的所有状态更新逻辑整合到一个外部函数中，这个函数叫作 reducer。

使用 reducer 整合状态逻辑

随着组件复杂度的增加，将很难一眼看清所有的组件状态更新逻辑。例如，下面的 TaskApp 组件有一个数组类型的状态 tasks，并通过三个不同的事件处理程序来实现任务的添加、删除和修改：

import { useState } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';

export default function TaskApp() {
  const [tasks, setTasks] = useState(initialTasks);

  function handleAddTask(text) {
    setTasks([
      ...tasks,
      {
        id: nextId++,
        text: text,
        done: false,
      },
    ]);
  }

  function handleChangeTask(task) {
    setTasks(
      tasks.map((t) => {
        if (t.id === task.id) {
          return task;
        } else {
          return t;
        }
      })
    );
  }

  function handleDeleteTask(taskId) {
    setTasks(tasks.filter((t) => t.id !== taskId));
  }

  return (
    <>
      <h1>布拉格的行程安排</h1>
      <AddTask onAddTask={handleAddTask} />
      <TaskList
        tasks={tasks}
        onChangeTask={handleChangeTask}
        onDeleteTask={handleDeleteTask}
      />
    </>
  );
}

let nextId = 3;
const initialTasks = [
  {id: 0, text: '参观卡夫卡博物馆', done: true},
  {id: 1, text: '看木偶戏', done: false},
  {id: 2, text: '打卡列侬墙', done: false},
];

这个组件的每个事件处理程序都通过 setTasks 来更新状态。随着这个组件的不断迭代，其状态逻辑也会越来越多。为了降低这种复杂度，并让所有逻辑都可以存放在一个易于理解的地方，可以将这些状态逻辑移到组件之外的一个称为 reducer 的函数中。

Reducer 是处理状态的另一种方式。可以通过三个步骤将 useState 迁移到 useReducer：

  1. 将设置状态的逻辑 修改 成 dispatch 的一个 action；
  2. 编写 一个 reducer 函数；
  3. 在组件中 使用 reducer。

第 1 步: 将设置状态的逻辑修改成 dispatch 的一个 action

事件处理程序目前是通过设置状态来 实现逻辑的：

function handleAddTask(text) {
  setTasks([
    ...tasks,
    {
      id: nextId++,
      text: text,
      done: false,
    },
  ]);
}

function handleChangeTask(task) {
  setTasks(
    tasks.map((t) => {
      if (t.id === task.id) {
        return task;
      } else {
        return t;
      }
    })
  );
}

function handleDeleteTask(taskId) {
  setTasks(tasks.filter((t) => t.id !== taskId));
}

移除所有的状态设置逻辑。只留下三个事件处理函数：

  • handleAddTask(text) 在用户点击 “添加” 时被调用。
  • handleChangeTask(task) 在用户切换任务或点击 “保存” 时被调用。
  • handleDeleteTask(taskId) 在用户点击 “删除” 时被调用。

使用 reducers 管理状态与直接设置状态略有不同。它不是通过设置状态来告诉 React “要做什么”，而是通过事件处理程序 dispatch 一个 “action” 来指明 “用户刚刚做了什么”。（而状态更新逻辑则保存在其他地方！）因此，不再通过事件处理器直接 “设置 task”，而是 dispatch 一个 “添加/修改/删除任务” 的 action。这更加符合用户的思维。

function handleAddTask(text) {
  dispatch({
    type: 'added',
    id: nextId++,
    text: text,
  });
}

function handleChangeTask(task) {
  dispatch({
    type: 'changed',
    task: task,
  });
}

传递给 dispatch 的对象叫做 “action”：

function handleDeleteTask(taskId) {
  dispatch(
    // "action" 对象：
    {
      type: 'deleted',
      id: taskId,
    }
  );
}

它是一个普通的 JavaScript 对象。它的结构是由你决定的，但通常来说，它应该至少包含可以表明 发生了什么事情 的信息。

注意：action 对象可以有多种结构。

按照惯例，通常会添加一个字符串类型的 type 字段来描述发生了什么，并通过其它字段传递额外的信息。type 是特定于组件的，在这个例子中 added 和 addded_task 都可以。选一个能描述清楚发生的事件的名字！

dispatch({
  // 针对特定的组件
  type: 'what_happened',
  // 其它字段放这里
});

第 2 步: 编写一个 reducer 函数

reducer 函数就是放置状态逻辑的地方。它接受两个参数，分别为当前 state 和 action 对象，并且返回的是更新后的 state：

function yourReducer(state, action) {
  // 给 React 返回更新后的状态
}

React 会将状态设置为从 reducer 返回的状态。

在这个例子中，要将状态设置逻辑从事件处理程序移到 reducer 函数中，需要：

  1. 声明当前状态（tasks）作为第一个参数；
  2. 声明 action 对象作为第二个参数；
  3. 从 reducer 返回 下一个 状态（React 会将旧的状态设置为这个最新的状态）。

下面是所有迁移到 reducer 函数的状态设置逻辑：

function tasksReducer(tasks, action) {
  if (action.type === 'added') {
    return [
      ...tasks,
      {
        id: action.id,
        text: action.text,
        done: false,
      },
    ];
  } else if (action.type === 'changed') {
    return tasks.map((t) => {
      if (t.id === action.task.id) {
        return action.task;
      } else {
        return t;
      }
    });
  } else if (action.type === 'deleted') {
    return tasks.filter((t) => t.id !== action.id);
  } else {
    throw Error('未知 action: ' + action.type);
  }
}

由于 reducer 函数接受 state（tasks）作为参数，因此可以 在组件之外声明它。这减少了代码的缩进级别，提升了代码的可读性。

注意：上面的代码使用了 if/else 语句，但是在 reducers 中使用 switch 语句 是一种惯例。两种方式结果是相同的，但 switch 语句读起来一目了然。

以后会像这样使用：

function tasksReducer(tasks, action) {
  switch (action.type) {
    case 'added': {
      return [
        ...tasks,
        {
          id: action.id,
          text: action.text,
          done: false,
        },
      ];
    }
    case 'changed': {
      return tasks.map((t) => {
        if (t.id === action.task.id) {
          return action.task;
        } else {
          return t;
        }
      });
    }
    case 'deleted': {
      return tasks.filter((t) => t.id !== action.id);
    }
    default: {
      throw Error('未知 action: ' + action.type);
    }
  }
}

建议将每个 case 块包装到 { 和 } 花括号中，这样在不同 case 中声明的变量就不会互相冲突。此外，case 通常应该以 return 结尾。如果忘了 return，代码就会 进入 到下一个 case，这就会导致错误！

如果还不熟悉 switch 语句，使用 if/else 也是可以的。

第 3 步: 在组件中使用 reducer

最后，需要将 tasksReducer 导入到组件中。记得先从 React 中导入 useReducer Hook：

import { useReducer } from 'react';

接下来，就可以替换掉之前的 useState:

const [tasks, setTasks] = useState(initialTasks);

只需要像下面这样使用 useReducer:

const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);

useReducer 和 useState 很相似——必须给它传递一个初始状态，它会返回一个有状态的值和一个设置该状态的函数（在这个例子中就是 dispatch 函数）。但是，它们两个之间还是有点差异的。

useReducer 钩子接受 2 个参数：

  1. 一个 reducer 函数
  2. 一个初始的 state

它返回如下内容：

  1. 一个有状态的值
  2. 一个 dispatch 函数（用来 “派发” 用户操作给 reducer）

现在一切都准备就绪了！在这里把 reducer 定义在了组件的末尾：

import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';

export default function TaskApp() {
  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);

  function handleAddTask(text) {
    dispatch({
      type: 'added',
      id: nextId++,
      text: text,
    });
  }

  function handleChangeTask(task) {
    dispatch({
      type: 'changed',
      task: task,
    });
  }

  function handleDeleteTask(taskId) {
    dispatch({
      type: 'deleted',
      id: taskId,
    });
  }

  return (
    <>
      <h1>布拉格的行程安排</h1>
      <AddTask onAddTask={handleAddTask} />
      <TaskList
        tasks={tasks}
        onChangeTask={handleChangeTask}
        onDeleteTask={handleDeleteTask}
      />
    </>
  );
}

function tasksReducer(tasks, action) {
  switch (action.type) {
    case 'added': {
      return [
        ...tasks,
        {
          id: action.id,
          text: action.text,
          done: false,
        },
      ];
    }
    case 'changed': {
      return tasks.map((t) => {
        if (t.id === action.task.id) {
          return action.task;
        } else {
          return t;
        }
      });
    }
    case 'deleted': {
      return tasks.filter((t) => t.id !== action.id);
    }
    default: {
      throw Error('未知 action: ' + action.type);
    }
  }
}

...

如果有需要，甚至可以把 reducer 移到一个单独的文件中：

// tasksReducer.js
export default function tasksReducer(tasks, action) {
  switch (action.type) {
    case 'added': {
      return [
        ...tasks,
        {
          id: action.id,
          text: action.text,
          done: false,
        },
      ];
    }
    case 'changed': {
      return tasks.map((t) => {
        if (t.id === action.task.id) {
          return action.task;
        } else {
          return t;
        }
      });
    }
    case 'deleted': {
      return tasks.filter((t) => t.id !== action.id);
    }
    default: {
      throw Error('未知 action：' + action.type);
    }
  }
}

当像这样分离关注点时，我们可以更容易地理解组件逻辑。现在，事件处理程序只通过派发 action 来指定 发生了什么，而 reducer 函数通过响应 actions 来决定 状态如何更新。

对比 useState 和 useReducer

Reducers 并非没有缺点！以下是比较它们的几种方法：

  • 代码体积： 通常，在使用 useState 时，一开始只需要编写少量代码。而 useReducer 必须提前编写 reducer 函数和需要调度的 actions。但是，当多个事件处理程序以相似的方式修改 state 时，useReducer 可以减少代码量。
  • 可读性： 当状态更新逻辑足够简单时，useState 的可读性还行。但是，一旦逻辑变得复杂起来，它们会使组件变得臃肿且难以阅读。在这种情况下，useReducer 允许将状态更新逻辑与事件处理程序分离开来。
  • 可调试性： 当使用 useState 出现问题时, 很难发现具体原因以及为什么。 而使用 useReducer 时， 可以在 reducer 函数中通过打印日志的方式来观察每个状态的更新，以及为什么要更新（来自哪个 action）。 如果所有 action 都没问题，就知道问题出在了 reducer 本身的逻辑中。 然而，与使用 useState 相比，必须单步执行更多的代码。
  • 可测试性： reducer 是一个不依赖于组件的纯函数。这就意味着可以单独对它进行测试。一般来说，我们最好是在真实环境中测试组件，但对于复杂的状态更新逻辑，针对特定的初始状态和 action，断言 reducer 返回的特定状态会很有帮助。
  • 个人偏好： 并不是所有人都喜欢用 reducer，没关系，这是个人偏好问题。可以随时在 useState 和 useReducer 之间切换，它们能做的事情是一样的！

如果在修改某些组件状态时经常出现问题或者想给组件添加更多逻辑时，建议还是使用 reducer。当然，也不必整个项目都用 reducer，这是可以自由搭配的。甚至可以在一个组件中同时使用 useState 和 useReducer。

编写一个好的 reducers

编写 reducers 时最好牢记以下两点：

  • reducers 必须是纯粹的。 这一点和 状态更新函数 是相似的，reducers 在是在渲染时运行的！（actions 会排队直到下一次渲染)。 这就意味着 reducers 必须纯净，即当输入相同时，输出也是相同的。它们不应该包含异步请求、定时器或者任何副作用（对组件外部有影响的操作）。它们应该以不可变值的方式去更新 对象 和 数组。
  • 每个 action 都描述了一个单一的用户交互，即使它会引发数据的多个变化。 举个例子，如果用户在一个由 reducer 管理的表单（包含五个表单项）中点击了 重置按钮，那么 dispatch 一个 reset_form 的 action 比 dispatch 五个单独的 set_field 的 action 更加合理。如果在一个 reducer 中打印了所有的 action 日志，那么这个日志应该是很清晰的，它能让你以某种步骤复现已发生的交互或响应。这对代码调试很有帮助！

使用 Immer 简化 reducers

与在平常的 state 中 修改对象 和 数组 一样，可以使用 Immer 这个库来简化 reducer。在这里，useImmerReducer 让你可以通过 push 或 arr[i] = 来修改 state ：

import { useImmerReducer } from 'use-immer';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';

function tasksReducer(draft, action) {
  switch (action.type) {
    case 'added': {
      draft.push({
        id: action.id,
        text: action.text,
        done: false,
      });
      break;
    }
    case 'changed': {
      const index = draft.findIndex((t) => t.id === action.task.id);
      draft[index] = action.task;
      break;
    }
    case 'deleted': {
      return draft.filter((t) => t.id !== action.id);
    }
    default: {
      throw Error('未知 action：' + action.type);
    }
  }
}

export default function TaskApp() {
  const [tasks, dispatch] = useImmerReducer(tasksReducer, initialTasks);

  function handleAddTask(text) {
    dispatch({
      type: 'added',
      id: nextId++,
      text: text,
    });
  }

  function handleChangeTask(task) {
    dispatch({
      type: 'changed',
      task: task,
    });
  }

  function handleDeleteTask(taskId) {
    dispatch({
      type: 'deleted',
      id: taskId,
    });
  }

  return (
    <>
      <h1>布拉格的行程安排</h1>
      <AddTask onAddTask={handleAddTask} />
      <TaskList
        tasks={tasks}
        onChangeTask={handleChangeTask}
        onDeleteTask={handleDeleteTask}
      />
    </>
  );
}

...

Reducers 应该是纯净的，所以它们不应该去修改 state。而 Immer 提供了一种特殊的 draft 对象，可以通过它安全的修改 state。在底层，Immer 会基于当前 state 创建一个副本。这就是为什么通过 useImmerReducer 来管理 reducers 时，可以修改第一个参数，且不需要返回一个新的 state 的原因。

摘要

  • 把 useState 转化为 useReducer：
    1. 通过事件处理函数 dispatch actions；
    2. 编写一个 reducer 函数，它接受传入的 state 和一个 action，并返回一个新的 state；
    3. 使用 useReducer 替换 useState；
  • Reducers 可能需要写更多的代码，但是这有利于代码的调试和测试。
  • Reducers 必须是纯净的。
  • 每个 action 都描述了一个单一的用户交互。
  • 使用 Immer 来帮助在 reducer 里直接修改状态。
木蓝茶陌*_*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何将你的AngularJS1.x应用迁移至React的方法
10-18
本篇文章主要介绍了如何将你的AngularJS1.x应用迁移至React的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React--状态逻辑迁移至Reducer
sieyeSu的博客
09-04 18
2.dispatch用于传入动作action对象，以触发状态迁移逻辑函数来更新渲染组件，则dispatch为其中的一个函数。JSX中使用dispatch()函数传入action动作对象时，是传递给自己编写的迁移状态逻辑函数（reducer）中。相应的自行编写状态迁移逻辑函数（reducer即此处的messengerReducer）部分。主函数中使用useReducer方法，返回dispatch函数和新的state状态。
react中dispatch_React中的Redux
weixin_28867883的博客
12-24 1615
学习必备要点：首先弄明白，Redux在使用React开发应用时，起到什么作用——状态集中管理弄清楚Redux是如何实现状态管理的——store、action、reducer三个概念在React中集成Redux：redux + react-redux(多了一个概念——selector)Redux调试工具：redux devtoolsredux相关很好用的插件：redux-saga的相关介绍redux...
在 React 中使用 Redux 的 4 种写法
fe_watermelon的博客
06-04 1789
大家好，我是前端西瓜哥。今天我们看看React 中使用 Redux 的 4 种写法。Redux 是一种状态容器 JS 库，提供可预测的状态管理，经常和 React 配合来管理应用的全局状态，进行响应式组件更新。Redux 一般来说并不是必须的，只有在项目比较复杂的时候，比如多个分散在不同地方的组件使用同一个状态。对于这种情况，如果通过 props 层层传递，代码会变得不可维护，这时候我们可以考虑使用 Redux 这类状态管理库。我们创建一个 User 组件，显示用户名，并支持设置用户名。先看看不使用 Red
从React-Redux迁移到@ reduxjs / toolkit
编程故事的地方
06-30 3381
我一直在使用react-redux，我很喜欢它，使用react是很棒的，但是它会很快变得混乱，所以当我被介绍给redux时，我立刻就喜欢它。 问题是……当我使用yarn create ract-app --template redux创建一个应用程序时，该应用程序的语法与在youtube上看到的所有教程中教给我的语法不同，因此我开始使用默认应用程序，而且他们的处事方式更加简洁明了。 在Goog...
浅谈React中组件逻辑复用的那些事儿
11-20
基本每个开发者都需要考虑逻辑复用的问题，否则你的项目中将充斥着大量的重复代码。...当然，如果你曾经在低版本的 react 中使用过 Mixins，例如 react-timer-mixin， react-addons-pure-render-mi
React18结合TS视频教程下载2022
09-01
React18结合TS视频教程下载2022
React 项目迁移 Webpack Babel7的实现
10-18
主要介绍了React 项目迁移 Webpack Babel7的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react 组件监听浏览器窗口变化
jyn15159的博客
04-26 3589
react 组件监听浏览器窗口变化 react 组件实现监听浏览器窗口变化，需要在window对象中添加监听事件，事件中参数1是监听的事件，参数2为事件调用的方法。 // 监听浏览器窗口变化 componentDidMount() { // 在window对象中添加监听事件 window.addEventListener('resize', this.resizeWindow) } // 移除监听窗口变化的事件 componentWillUnmount() { window.remove
Create-React-App .env文件自定义配置
jyn15159的博客
04-28 2513
React项目build打包时不生成 sourceMap（.map）文件 打包项目，主要的目的是为了，压缩代码，加快数据的传输，减少 http 请求，从而优化前端页面的性能。 脚手架，默认情况下，打包项目的过程中，都会生成 souceMap（.map）文件。 sourceMap 会增加打包以后的文件的体积，对于一些需求是轻量级的项目而言，sourceMap 有点多余。 添加.env文件修改变量 配置 node.js 运行时候的环境变量，传入 GENERATE_SOURCEMAP 值为 false。 1.
React 18 state 如同一张快照
jyn15159的博客
08-08 1473
设置 state 请求一次新的渲染。React 将 state 存储在组件之外，就像在架子上一样。 当调用 `useState` 时，React 会为提供该次渲染 的一张 state 快照。变量和事件处理函数不会在重渲染中“存活”。每个渲染都有自己的事件处理函数。每个渲染（以及其中的函数）始终“看到”的是 React 提供给这个 渲染的 state 快照。可以在心中替换事件处理函数中的 state，类似于替换渲染的 JSX。过去创建的事件处理函数拥有的是创建它们的那次渲染中的 state 值。
React 18 使用 ref 操作 DOM
jyn15159的博客
06-21 1408
Refs 是一个通用概念，但大多数情况下会使用它们来保存 DOM 元素。通过传递指示 React 将 DOM 节点放入。通常，会将 refs 用于非破坏性操作，例如聚焦、滚动或测量 DOM 元素。默认情况下，组件不暴露其 DOM 节点。可以通过使用forwardRef并将第二个ref参数传递给特定节点来暴露 DOM 节点。避免更改由 React 管理的 DOM 节点。如果确实修改了 React 管理的 DOM 节点，请修改 React 没有理由更新的部分。focus()
react学习13-React 组件化—children(插槽)详解
jyn15159的博客
04-14 1314
children(插槽) children的作用类似于Vue中插槽的概念。 children属性名固定，它是React的核心API。 class Test extends React.Component { render () { return ( <div> <div>测试Children:</div> <div>{this.props.chi
React 18 组件通信 将props传递给子组件
jyn15159的博客
06-02 1284
要传递 props，请将它们添加到 JSX，就像使用 HTML 属性一样。要读取 props，请使用解构语法。可以指定一个默认值，如size = 100，用于缺少值或值为undefined的 props。可以使用JSX 展开语法转发所有 props，但不要过度使用它！像这样的嵌套 JSX，将被视为Card组件的childrenprop。Props 是只读的时间快照：每次渲染都会收到新版本的 props。不能改变 props。当需要交互性时，可以设置 state。
React 18 对 state 进行保留和重置
jyn15159的博客
08-31 1159
只要在相同位置渲染的是相同组件， React 就会保留状态。 state 不会被保存在 JSX 标签里。它与在树中放置该 JSX 的位置相关联。 可以通过为一个子树指定一个不同的 key 来重置它的 state。 不要嵌套组件的定义，否则会意外地导致 state 被重置。
React 18 渲染和提交
jyn15159的博客
08-07 1153
在一个 React 应用中一次屏幕更新都会发生以下三个步骤：1. 触发；2. 渲染；3. 提交 可以使用严格模式去找到组件中的错误 如果渲染结果与上次一样，那么 React 将不会修改 DOM
React 18 更新 state 中的数组
jyn15159的博客
08-15 1126
可以把数组放入 state 中，但不应该直接修改它。不要直接修改数组，而是创建它的一份 新的拷贝，然后使用新的数组来更新它的状态。可以使用 `[...arr, newItem]` 这样的数组展开语法来向数组中添加元素。可以使用 `filter()` 和 `map()` 来创建一个经过过滤或者变换的数组。可以使用 Immer 来保持代码简洁。
React 18 使用 Context 深层传递参数
最新发布
jyn15159的博客
09-06 1105
Context 使组件向其下方的整个树提供信息。传递 Context 的方法:通过创建并导出 context。在无论层级多深的任何子组件中，把 context 传递给Hook 来读取它。在父组件中把 children 包在中来提供 context。Context 会穿过中间的任何组件。Context 可以让你写出 “较为通用” 的组件。在使用 context 之前，先试试传递 props 或者将 JSX 作为children传递。
react怎么使用reducer储存登录状态
06-11
在React中，我们可以使用useReducer Hook来进行状态管理。下面是一个简单的例子，展示如何使用Reducer来储存登录状态： ```jsx import React, { useReducer } from "react"; const initialState = { isLoggedIn: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值