我应该何时将 Redux 添加到 React 应用程序？

Posted 2023-02-19

【中文标题】我应该何时将 Redux 添加到 React 应用程序？

【英文标题】：When should I add Redux to a React app?

【发布时间】：2016-08-06 12:26:29

【问题描述】：

我目前正在学习 React，并试图弄清楚如何将它与 Redux 一起使用来构建移动应用程序。我对两者如何关联/一起使用感到困惑。例如，我在 React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript 中完成了本教程，但现在我想尝试向该应用程序添加一些减速器/动作，但我不确定这些与我已经完成的工作在哪里相关。

【参考方案1】：

使用过 Redux 并且个人觉得它很麻烦，我发现将一个对象作为道具传递给我的组件可能是一种更容易维护状态的方法。更不用说这是一种引用函数以调用其他组件的简单方法。它可以解决很多React中组件之间传递消息的繁琐问题，所以二合一。

【参考方案2】：

我准备了这份文档来了解 Redux。希望这能消除您的疑虑。

-------------- REDUX教程------ ---

行动- 操作是将数据从应用程序发送到存储的信息负载。它们是商店信息的唯一来源。你可以寄给他们 仅使用 store.dispatch()。

   Example-
const  ADD_TODO = 'ADD_TODO'


   type:ADD_TODO,
   text: 'Build my first redux app'

Actions 是普通的 javascript 对象。 Action 必须有一个 [ type ] 属性来指示正在执行的操作的类型。类型应定义为字符串常量。

动作创作者----- ---------------- ---- 动作创建者正是创建动作的函数 很容易混淆这些术语 - 动作和动作创建者。 在 redux action 中，creator 返回一个 action。

function addToDo(text) 
   return 
    type: ADD_TODO,
    text    
   

初始化调度将结果传递给 dispatch() 函数。

dispatch(addToDo(text)); dispatch(completeToDo(index))

或者，您可以创建一个自动调度的绑定动作创建器。

cosnt boundAddTodO = text => dispatch(addToDo(text));

现在可以直接调用了

boundaddTodO(text);

dispatch() 函数可以直接从 store.dispatch() 访问。但我们 使用辅助 connect() 方法访问它。

Actions.js.......

动作............

exports cosnt ADD_TODO = 'ADD_TODO';
exports cosnt TOGGLE_TODO = 'TOGGLE_TODO'

动作创作者

导出函数 addToDO(text) 返回 类型：ADD_TODO， 文本

---

…………………………………………………………………………………………………………………………………………减速机......

Reducer 指定应用程序状态如何更改以响应发送到存储的操作。

设计状态形状

在 redux 中，所有应用程序状态都存储在单个对象中。您必须存储一些数据以及一些状态。

可见性过滤器：'SHOW_ALL'， 待办事项：[ text: '考虑使用 redux', 完成：真 , text: '将所有状态保留在单个树中' ]

处理操作 ---------------- reducer 是纯粹的函数，它接受之前的状态和动作，并返回一个新的状态。

(previousState, action) => 新状态

我们将从指定初始状态开始。 Redux 将第一次以未定义的状态调用我们的 reducer。这是我们返回应用程序状态的机会。

import   visiblilityFilters  from './actions';
const initialState = 
    visibilityFilter: VisibilityFilters.SHOW_ALL,
    todo: []


function todoApp(state, action)
    if(typeof state == 'undefined')
        return initialState;
    

    // dont handle other cases as of now.
    return state;

你也可以使用 ES6 的方式来处理 JS

function todoApp(state = initialState, action) 
  switch (action.type) 
    case SET_VISIBILITY_FILTER:
      return Object.assign(, state, 
        visibilityFilter: action.filter
      )
    default:
      return state
  

---

....................... 存储...... ......................

商店是将它们聚集在一起的对象。店铺有以下责任

保持应用程序状态 允许通过 getState() 访问状态 允许通过 dispatch() 更新状态 通过suscriber(listener)注册listeneres

注意。使用 combineReducers() 将多个 reducer 合并为一个。

const store = createStore(todoapp); // todoapp 是减速器

【参考方案3】：

这就是 redux 的工作原理。从任何组件或视图中调度一个动作。动作必须具有“类型”属性，并且可以是保存动作发生信息的任何属性。动作中传递的数据可能与不同的reducer相关，因此相同的对象会传递给不同的reducer。每个减速器都将其部分/贡献用于状态。然后合并输出并形成新的状态，并通知必须订阅状态更改事件的组件。

在上面的示例中，棕色具有所有 3 个分量 RGB。每个reducer 接收相同的棕色，并将其对颜色的贡献分开。

【参考方案4】：

当我们编写应用程序时，我们需要管理应用程序的状态。 如果我们需要在组件之间共享状态，React 会在组件内本地管理状态，我们可以使用 props 或回调。

但是随着应用程序的增长，管理状态和状态转换变得困难。状态和状态转换需要正确跟踪才能调试应用程序。

Redux 是用于管理状态和状态转换的 JavaScript 应用程序的可预测状态容器，通常与 React 一起使用，

redux 的概念可以用下图来解释。

当用户在与组件交互时触发一个动作并且一个动作被分派到 store 时，store 中的 reducer 接受该动作并更新应用程序的状态并存储在应用程序范围内的不可变全局变量中在 store 中更新订阅状态的相应视图组件将得到更新。

由于状态是全局管理的，并且使用 redux 更容易维护。

【参考方案5】：

首先，如果您不需要Redux，则无需将其添加到您的应用程序中！很简单，所以如果您根本不需要它，请不要强迫自己将它包含在您的项目中！但这并不意味着 Redux 不好，它在大型应用程序中确实很有帮助，所以请继续阅读...

Redux 是你的 React 应用程序的状态管理，想想Redux 就像一个本地存储，它跟踪你的状态，你可以在任何页面和你想要的路由中访问状态，也与 Flux 相比，你只有一个店铺，意味着一个真实的来源......

看这张图，一目了然地了解 Redux 的作用：

这也是 Redux 自我介绍的方式：

Redux 是 JavaScript 应用程序的可预测状态容器。

它可以帮助您编写行为一致、运行在 不同的环境（客户端、服务器和本机），并且易于 测试。最重要的是，它提供了出色的开发人员体验，例如 作为实时代码编辑与时间旅行调试器相结合。

您可以将 Redux 与 React 或任何其他视图库一起使用。 它很小（2kB，包括依赖项）。

根据文档，Redux 的三个原则如下：

1.单一事实来源

2。状态是只读的

3。使用纯函数进行更改

所以基本上，当您需要在单个商店中跟踪您喜欢的应用程序中的任何内容时，Redux 很方便，您可以在应用程序中的任何位置以任何途径访问它...只需使用 store.getState();

同时使用中间件Redux，你可以更好的管理状态，Redux官方页面上有一个方便的组件和中间件列表！

如果您的应用程序很大，包含许多组件、状态和路由，请尝试从一开始就实现 Redux！它肯定会帮助你！

【参考方案6】：

我发现将 Redux 添加到应用程序/堆栈的理想路径是等到在您/应用程序/团队感受到它解决的痛苦之后。一旦你开始看到props 的长链在多个级别的组件中建立并传递下去，或者你发现自己正在编排复杂的状态操作/读取，这可能表明你的应用程序可能会从引入 Redux 等中受益。

我建议使用您已经使用“just React”构建的应用程序，看看 Redux 如何适合它。看看你是否可以通过一次提取一个状态或一组“动作”来优雅地介绍它。对其进行重构，而不必担心对您的应用程序进行大爆炸式重写。如果您仍然无法看到它可以在哪里增加价值，那么这可能表明您的应用程序不够大或不够复杂，不适合在 React 之上使用 Redux 之类的东西。

如果您还没有遇到过，Dan（上面已回答）有一个很棒的短视频系列，它从更基础的层面介绍了 Redux。我强烈建议花一些时间来吸收它：https://egghead.io/series/getting-started-with-redux

Redux 也有一些非常棒的文档。尤其是解释了很多“为什么”比如http://redux.js.org/docs/introduction/ThreePrinciples.html

【讨论】：

我完全同意你的看法。 Redux 为您的应用程序添加了很多样板。对于中小型应用程序，通常根本不需要 Redux。对于非常大的应用程序，您会发现自己通过如此多的级别级联道具，它们将难以管理。这就是 Redux 出现的时候。

【参考方案7】：

React 是一个 UI 框架，负责更新 UI 以响应通常被描述为某个组件“拥有”的状态的“事实来源”。 Thinking in React 很好地描述了 React 的状态所有权概念，我强烈建议你仔细阅读。

当状态是分层的并且或多或少与组件结构匹配时，这种状态所有权模型运行良好。通过这种方式，状态可以“分散”到许多组件中，并且应用程序很容易理解。

但是，有时应用程序的远程部分希望访问相同的状态，例如，如果您缓存获取的数据并希望同时在任何地方持续更新它。在这种情况下，如果你遵循 React 模型，你最终会在组件树的顶部有一堆非常大的组件，它们通过一些不使用它们的中间组件向下传递无数的 props，只是为了到达一些真正关心该数据的叶组件。

当您发现自己处于这种情况时，您可以（但不是必须）使用 Redux 将这种状态管理逻辑从***组件“提取”到称为“reducers”的单独函数中”，并将关心该状态的叶子组件直接“连接”到它，而不是通过整个应用程序传递道具。如果你还没有这个问题，你可能不需要 Redux。

最后，请注意 Redux 并不是这个问题的最终解决方案。在 React 组件之外还有许多其他方法可以管理本地状态——例如，一些不喜欢 Redux 的人对 MobX 很满意。我建议你先对 React 状态模型有一个深刻的了解，然后独立评估不同的解决方案，并与它们一起构建小应用程序，以了解它们的优缺点。

（这个答案的灵感来自于 Pete Hunt 的 react-howto 指南，我建议你也阅读一下。）

【讨论】：

相信技术的创造者自己回答了这个问题！