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


76

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

Answers:


148

React是一个UI框架,负责响应“真理源”(通常被描述为某个组件“拥有”的状态)来更新UI。在React思考可以很好地描述React状态所有权的概念,我强烈建议您仔细研究一下。

当状态是分层的并且或多或少与组件结构匹配时,此状态所有权模型可以很好地工作。这样,状态就可以“分散”到许多组件中,并且该应用程序易于理解。

但是,有时应用程序的较远部分希望能够访问相同的状态,例如,如果您缓存获取的数据并希望在各处同时一致地更新它。在这种情况下,如果遵循React模型,您将在组件树的顶部得到一堆非常大的组件,这些组件将无数个prop向下传递给一些不使用它们的中间组件,只是为了到达一些实际上关心该数据的叶子组件。

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

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

(此答案受Pete Hunt的反应方法指南的启发,我建议您也阅读它。)


相信当技术创造者自己回答问题时!
VIPUL TYAGI

34

我发现,添加到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


3
我完全同意你的看法。Redux为您的应用程序添加了很多样板。对于中小型应用程序,通常根本不需要Redux。对于非常大的应用程序,您会发现自己层叠了很多级别的道具,难以管理。这时候,终极版的用武之地。
丹^ h

4

我已经准备好本文档以了解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()函数。

  1. dispatch(addToDo(text));
  2. 调度(completeToDo(索引))

或者,您可以创建一个自动分派的绑定动作创建器。

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

现在你可以直接叫它

boundaddTodO(text);

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

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

动作........

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

动作创作者

导出函数addToDO(text){return {type:ADD_TODO,text}}


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

精简器指定应用程序状态如何响应发送到商店的操作而变化。

设计状态整形

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

{可见性筛选器:'SHOW_ALL',待办事项:[{文本:'考虑使用redux',已完成:true},{文本:'使所有状态保留在单个树中'}]}

处理动作----------------减速器是采用以前状态和动作并返回新状态的纯函数。

(previousState,操作)=> 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
  }
}

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

商店是将它们组合在一起的对象。商店有以下责任

  1. 保持应用程序状态
  2. 允许通过getState()访问状态
  3. 允许通过dispatch()更新状态
  4. 通过订阅者(侦听器)注册侦听器

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

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


1

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

Redux是您的React应用程序的状态管理,Redux像本地商店一样思考您的状态,您可以在任何页面中访问所需状态并路由所需的路线,与Flux相比,您只有一个商店,这意味着真理的来源...

看看这张图,一眼就能了解Redux的功能:

在此处输入图片说明

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

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

它可以帮助您编写性能一致,在不同环境(客户端,服务器和本机)中运行且易于测试的应用程序。最重要的是,它提供了出色的开发人员体验,例如实时代码编辑和时移调试器的结合。

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

同样根据文档,有以下三个原则Redux

1.真理的单一来源

2.状态为只读

3.使用纯函数进行更改

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

同样使用中间件Redux,您可以更好地管理状态,在Redux的官方页面上有方便的组件和中间件的列表!

很简单,如果您的应用程序将变得很大,具有许多组件,状态和路由,请尝试从一开始就实现Redux!它将在一定程度上帮助您!


1

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

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

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

下图可以解释redux的概念。

Redux

当用户与组件交互时用户触发一个动作,并调度一个动作来存储时,存储中的化简器将接受该动作并更新应用程序的状态,并在存储中进行更新时将其存储在应用程序范围的不可变全局变量中订阅该状态的相应视图组件将得到更新。

由于状态是全局管理的,因此可以更轻松地进行维护。


1

在此处输入图片说明

这就是redux的工作方式。从任何组件或视图调度动作。动作必须具有“类型”属性,并且可以是保存发生的动作信息的任何属性。实际传递的数据可能与不同的reducer有关,因此同一对象将传递给不同的reducer。每个reducer提取/做出其部分/状态贡献。然后合并输出,并形成新状态,并通知必须为状态更改事件订阅的组件。

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


0

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.