什么时候应该将 Redux 添加到 React 应用程序？

Question

我目前正在学习 React，我正在尝试弄清楚如何将它与 Redux 结合使用来构建移动应用程序。我对这两者如何 related/usable 感到困惑。例如，我在 React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript 中完成了本教程，但现在我想尝试向该应用程序添加一些 reducers/actions，但我不确定这些与我已经完成的工作有什么关系.

Answer 1

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

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

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

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

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

（本回答灵感来源于Pete Hunt的react-howto指南，建议您也阅读。）

Answer 2

我发现将 Redux 添加到 application/stack 的理想途径是等到在 you/app/team 感受到它解决的痛苦之后.一旦您开始看到 props 的长链通过多层组件构建并向下传递，或者您发现自己在编排复杂状态 manipulations/reads，这可能表明您的应用可能会受益于引入 Redux et其他

我建议使用您已经使用 "just React" 构建的应用程序，看看 Redux 如何适合它。看看你是否可以通过一次取出一个状态或一组 "actions" 来优雅地引入它。朝着它重构，而不是挂在你的应用程序的大爆炸重写上。如果您仍然无法确定它可以在哪里增加价值，那么这可能表明您的应用程序不够大或不够复杂，不值得在 React 之上使用 Redux 之类的东西。

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

Redux 也有一些非常棒的文档。特别是解释了很多"why"比如http://redux.js.org/docs/introduction/ThreePrinciples.html

Answer 3

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

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

看这张图，一目了然地了解Redux首先做了什么：

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

Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies).

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

1.单一事实来源

2。状态为只读

3。使用纯函数进行更改

所以基本上当你需要一个单一的商店来跟踪你在你的应用程序中喜欢的任何东西时，Redux 很方便，你可以在你的应用程序中的任何地方，以任何路径访问它......只需使用 store.getState();

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

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

Answer 4

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

但是随着应用程序的增长，管理状态和状态变得困难 transformations.State 并且需要正确跟踪状态转换以便调试应用程序。

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

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

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

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

Answer 5

这就是 redux 的工作原理。从任何组件或视图调度一个动作。动作必须有 "type" 属性并且可以是任何包含动作发生信息的属性。行动中传递的数据可能与不同的 reducer 相关，因此相同的对象被传递到不同的 reducer。每个 reducer 都将其 make-out 的 part/contribution 用于状态。然后合并输出并形成新状态，并且通知必须订阅状态更改事件的组件。

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

Answer 6

为了理解 Redux，我准备了这篇文档。希望这能消除您的疑虑。

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

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

   Example-
const  ADD_TODO = 'ADD_TODO'

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

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

动作创作者----- -------------- ---- Action creators正是创建action的函数很容易将术语 - 动作和动作创建者混为一谈。在 redux 动作中，创建者 return 是一个动作。

function addToDo(text) {
   return {
    type: ADD_TODO,
    text    
   }
}

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

调度（addToDo（文本））；
调度（completeToDo（索引））

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

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(文本){ return{ 类型：ADD_TODO，文本 } }

.......................减速器...................... ...............

Reducers 指定应用程序状态如何更改以响应发送到商店的操作。

设计状态形状

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

{ 可见性过滤器：'SHOW_ALL'，待办事项：[ { 文本：'Consider using redux'，完成：真 }, { 文本：'Kepp all the state in single tree' } ] }

处理动作 -------------- reducer 是采用先前状态和操作的纯函数，以及 return 新状态。

(previousState, action) => newState

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

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() 更新状态
通过订阅者（监听器）注册监听器

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

const store = createStore(todoapp); // todoapp 是 reducers

Answer 7

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

什么时候应该将 Redux 添加到 React 应用程序？

When should I add Redux to a React app?

javascript

mobile

reducers

reactjs

redux

Actions.js.......

动作创作者

设计状态形状