Redux中的州是什么?

时间:2017-09-25 12:00:55

标签: angular redux state

我用谷歌搜索,阅读和观看教程,出于某种原因,每个人都希望你知道一个州是什么。有些人略微刷过它,但并没有真正解释它是什么。最后,关于状态是什么的整个解释变得冗长,没有什么真正指出,因为Redux不能与React绑定并且也可以在Angular中使用,如果有人,我会非常高兴向我和其他所有想知道状态是什么的人解释(最好以Angular为例)。

6 个答案:

答案 0 :(得分:4)

  

Redux中的状态是什么?

State是一种用于表示对象状态的设计模式。四人帮的行为设计模式之一。它并不特定于Redux,它只是一个存储数据的集中位置。

Redux State是你申请的上帝。如果您是一个元素,并且想知道现在是否被点击(例如),您可以询问State。这是您在特定时间的申请照片。

它存储您的应用程序的所有信息。想象一下,为您的应用程序拍照,它会有一个单击复选框,启用下拉列表,禁用单选框等等。

状态是一个将所有这些信息作为属性的对象。例如,{ checkboxClicked: true}。通常,对象具有应用程序当前状态的快照。

当用户操作时,通过取消选中该复选框,应用程序的状态应该更改。让我们这样做:

{checkboxClicked: false}   // WRONG

不可变。这意味着您无法修改它(您无法修改照片,它属于过去)。

那我们该怎么办?我们注册 reducer 来处理用户造成的操作

在这种情况下,reducer将采取取消选中复选框的操作,并生成一个新的新状态,该状态与前一个状态完全相同,但名为checkboxClicked的属性除外,它将被设置现在到true

替代解释:

州是你世界的中心(申请)。

想象一下,您的应用程序有一个复选框。可以在状态对象中建模是否单击该元素的信息。想象一下(粗略的直觉):

State = {checkboxClicked: false};

以上可能是您申请的初始状态。

当用户选中该复选框时,Angular 将调度 操作。信息必须在您的州内更新,但不能在此特定中更新,因为此状态已消失,它属于过去!

您的应用程序现在点击了一个复选框。你必须拍一张新照片来描绘新的信息。状态是不可变,您无法修改它。换句话说,您不能执行此操作State.checkboxClicked = true;

通过 Reducer 生成新的状态。 Reducer是一个处理动作的函数。在这种情况下,它将创建一个State对象,其中每个属性都与之前相同,只有checkboxClicked将被设置为`true。

这将是您的申请的当前状态,直到用户采取行动。

答案 1 :(得分:2)

好问题,我们需要声明状态,因为如果没有动态应用程序,我们将如何保存正在发生的事情呢?

考虑一下,如果用户点击按钮,应用程序将如何知道下一步该做什么?在点击之前 - 我们有一个默认状态,在用户点击按钮后,我们会更改状态以表示接下来会发生什么。

示例:我们有一个起始编号为零的计数器。初始状态为零。用户单击按钮。嗯...下一步是什么?我们如何将各个部分组合在一起,更重要的是增加或减少数量?我们需要某种动态机制来表示我们的行为并将其转换为代表性的反馈/数据。我们称之为国家。一旦你使用状态 - 你不能没有它。

答案 2 :(得分:2)

Redux中的状态是一个JavaScript对象,其中应用程序的内部状态存储为其属性,例如,哪个用户已登录。登录后,应用程序的用户可能会导航到应用程序中的不同页面,但您需要以某种方式记住该用户是谁。这条信息是应用程序的内部状态的一部分。

然后通过执行动作,通过reducers修改状态,而不是直接修改状态,结果是应用了更改的先前状态的副本。例如,如果用户登录,您可以发出

的操作
var action = { type = 'USER_LOGIN', payload = 'john' };

发送给userReducer。然后,缩减器可以将您所在州的loggedInUser属性从'jane'更改为'john'。州的想法是拥有所有这些信息的中心位置,因此您可以从应用程序的任何位置访问该数据。

将状态视为可以随时随地读取的全局变量的集合,但您只能通过调度操作来写入。如果你能够随心所欲地给他们写信,这会很快变得混乱。通过强制您分派操作,应用对这些属性的更改的顺序是确定性的,从而使应用程序不易出错。

由于对属性的每次更改都需要通过reducer,您可以通过在reducer中设置断点来查看更改来查看更改的来源。如果你可以直接写入状态(全局变量就是这种情况),你就无法知道应用更改的时间和地点,这可能导致难以调试的应用程序。

答案 3 :(得分:2)

  

在信息技术和计算机科学中,描述了一个程序   如果它被设计为记住先前的事件或用户,则为有状态的   互动;被记住的信息被称为状态   系统

来自:https://en.wikipedia.org/wiki/State_(computer_science)

所以,例如,你想跟踪一个计数器,然后你需要这样的东西(在伪代码中,还不是Redux,例子在这个例子之下):

.block
  

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

来自:http://redux.js.org/

在Redux中,State意味着同样的事情。 Redux只是一个库,它允许您使用简化器(状态变换器)和操作(用户/系统事件)等概念,使用良好的软件开发实践来跟踪程序的状态。

您应用的整个状态存储在单个商店内的对象树中。这意味着您可以集中放置应用程序的整个状态。

更改状态树的唯一方法是发出一个动作,一个描述所发生事件的对象。

要指定操作如何转换状态树,编写纯缩减器。纯粹的减速器就是所谓的pure function

以下是reducer,一个带有(state,action)=>的纯函数。国家签名。它描述了一个动作如何将状态转换为下一个状态:

// 1. Initial state or value for the counter.
var counterState = 0;

// 2. Some functions to knows how to mutate/transforms the counter state.
function incrementCounter(prevState) {
  return prevState + 1;
}

function decrementCounter(prevState) {
  return prevState - 1;
}

// 3. Something that triggers this counter state mutatores based on user interactions.
var incrementButton = document.getElementById('plusButton');
incrementButton.onclick = function () {
  counterState = incrementCounter(counterState);
  console.log(counterState);
};

var decrementButton = document.getElementById('minusButton');
decrementButton.onclick = function () {
  counterState = decrementCounter(counterState);
  console.log(counterState);
};

来自:http://redux.js.org/

答案 4 :(得分:0)

所有答案都指向同一方向,这是一个包含我们应用程序在单个时间点的所有数据的通用IMMUTABLE JAVASCRIPT OBJECT。 真的看起来像Angularjs 1.x中的$ SCOPE变量。

答案 5 :(得分:0)

商店拥有应用程序的整个状态树。

什么是国家? 状态代表Redux应用程序的整个状态,通常是一个深层嵌套的对象。 更改状态的唯一方法是调度动作。它是一个几乎没有方法的对象。

您可以在此处https://reduxsimplified.blogspot.com/2018/08/redux-store.html

了解更多信息