Question

我目前正在学习React，我正在尝试弄清楚如何将它与Redux一起用于构建移动应用。我对两者如何相关/可用在一起感到困惑。例如，我在React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript中完成了本教程，但现在我想要在该应用程序中添加一些reducers / actions，我不确定那些与我已经完成的内容相关的地方

Answer 1

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

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

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

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

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

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

Answer 2

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

我建议您使用“React”构建一个已经构建的应用，并了解Redux如何适应它。看看你是否可以通过一次拔出一个状态或一组“动作”来优雅地介绍它。重构它，而不是被大量重写你的应用程序。如果您仍然无法查看它可能会增加价值的位置，那么这可能表明您的应用程序要么不大也不够复杂，无法在React之上获得类似Redux的功能。

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

Redux也有一些非常棒的文档。特别是解释了许多“为什么”，例如http://redux.js.org/docs/introduction/ThreePrinciples.html

Answer 3

我已经准备好本文档以了解Redux。希望这能清除你的厄运

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

动作- 操作是信息的有效负载，这些信息将数据从应用程序发送到商店。它们是商店的唯一信息来源。你可以寄给他们仅使用store.dispatch（）。

   Example-
const  ADD_TODO = 'ADD_TODO'

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

动作是纯JavaScript对象。动作必须具有[type]属性，该属性指示正在执行的动作的类型。该类型应定义为字符串常量。

动作创建者----- ---------------- ----动作创建者正是创建动作的功能将动作和动作创建者这两个术语混为一谈是很容易的。在redux动作中，创建者返回一个动作。

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”，待办事项：[ { 文字：“考虑使用redux”，完成：正确 }， { 文字：“使所有状态都落在一棵树中” } ] }

处理动作 ----------------化简器是纯函数，它们具有先前的状态和一个部分，然后返回新的状态。

（previousState，action）=> newState

我们将从指定初始状态开始。 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）注册listerneres

注意。使用combinedReducers（）将多个reducer合并为一个。

const store = createStore（todoapp）; // todoapp是减速器

Answer 4

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

Redux是您的React应用程序的状态管理，考虑Redux就像本地商店一样跟踪您的状态，您可以访问您想要的任何页面和路线中的状态，也可以与Flux进行比较，你只有一家商店，意味着一个真理来源......

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

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

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


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


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

同样根据文档，Redux有三个原则如下：

<强> 1。唯一的事实来源

<强> 2。州是只读的

第3。使用纯函数进行更改

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

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

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

Answer 5

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

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

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

redux的概念可以在下面的图像中解释。

当用户与组件交互并且调度操作以存储时，用户触发操作，然后存储中的reducer接受操作并更新应用程序的状态并存储在应用程序范围的不可变全局变量中在商店中更新订阅状态的相应视图组件将得到更新。

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

Answer 6

这就是redux的工作原理。从任何组件或视图发送操作。行动必须有＆＃34;键入＆＃34;财产，可能是任何持有行动信息的财产。传递的数据可能与不同的reducer相关，因此同一个对象传递给不同的reducer。每个减速器都采取/制定其对状态的贡献。然后合并输出并形成新状态，并通知必须订阅状态更改事件的组件。

在上面的例子中，棕色具有全部3个分量RGB。每个减速器都接受相同的棕色，并分离出它对颜色的贡献。

Answer 7

使用过Redux并亲自发现它很麻烦之后，我发现将对象作为道具传递给我的组件是一种更容易维护状态的方法。更不用说这是引用函数以调用其他组件的简便方法。它可以解决在React中组件之间传递消息的许多繁琐问题，因此这是一对二的。

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

7 个答案:

Actions.js ....................................

动作创作者

设计状态整形