Redux中的状态是什么？

Question

我已经使用Google，阅读并观看了教程，出于某种原因，每个人都希望您知道一个状态是什么。有些稍微刷了一下，但没有真正解释它是什么。最后，关于什么是状态的完整解释变得冗长而没有真正的指向，因为Redux不受React的约束，并且也可以用于Angular，所以如果有人向我解释，我会非常高兴。所有其他人也想知道什么是状态（最好以Angular为例）。

Answer 1

什么是终极版的状态？

状态是用于表示对象状态的设计模式。四人帮的行为设计模式之一。它不是特定于Redux，它只是一个集中存储数据的地方。

---

Redux State是您的应用程序的上帝。如果你是一个元素，你想知道你是否被点击（例如）现在，你可以问国家。这是您的应用程序在特定时间的照片。

它存储您的应用程序的所有信息。想象一下，为您的应用程序拍摄照片，例如，它会有一个点击复选框，启用下拉列表，禁用广播框等。

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

当用户动作时，通过取消选中该复选框，应用程序的状态应该改变。因此，让我们做到这一点：

{checkboxClicked: false} // WRONG 

状态不变。这意味着你不能修改它（你不能修改照片，它属于过去）。

那么我们该怎么做？我们注册了减速器，它处理由用户引起的动作。

在这种情况下，减速将取消选中该复选框的作用，并产生一个新的，新鲜的状态，这将是完全一样的前一个，除了从命名checkboxClicked的属性，它现在将设置为true 。

---

另一种解释：

国家是你的世界（应用程序）的中心。

想象一下，您的应用程序有一个复选框。这个元素是否被点击的信息可以在状态对象中建模。想象一下，像这样（粗略的直觉）：

State = {checkboxClicked: false}; 

以上可能是您的应用程序的初始状态。

当用户选中该复选框时，Angular 派发和动作。信息必须在你的状态更新，但不是在这个特定的之一，因为这个状态消失了，它属于过去！

您的应用程序现在有一个复选框单击。你必须拍一张新照片来描述新的信息。国家是不可变的，你不能修改它。换句话说，你不能这样做State.checkboxClicked = true;。

您通过减速机生成新的新鲜状态。 Reducer是一个处理动作的函数。在这种情况下，它将创建一个State对象，其中每个属性将与之前相同，并且只有checkboxClicked将设置为“true”。

这将是您的应用程序的当前状态，直到用户采取行动。

Answer 2

好问题，我们需要状态，因为我们如何在没有它的情况下保存动态应用程序发生的事情？

想一想，如果用户点击一个按钮，应用程序如何知道下一步该怎么做？在点击之前 - 我们有一个默认状态，在用户点击按钮后，我们改变状态来表示接下来会发生什么。

例如：我们有一个起始数字为零的计数器。初始状态为零。用户点击按钮。嗯...接下来呢？我们如何将这些部分拼凑在一起，更重要的是增加或减少数量？我们需要某种动态机制来表达我们的行为并将其转化为具有代表性的反馈/数据。我们称之为国家。一旦你使用国家 - 你不能没有它。

Answer 3

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

然后通过缩减器从不直接修改状态，方法是让它们执行操作，结果是应用更改的先前状态的副本。例如，如果用户登录时，你可能会用其发送到userReducer的

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

的动作。然后，减速器可能会将您所在州的loggedInUser属性从'jane'更改为'john'。与国家的想法是所有这些信息的中心位置，所以你可以从你的应用程序的任何地方访问这些数据。

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

由于对属性的每次更改都需要通过reducer，因此您可以通过在reducer内设置断点来查看更改的来源，从而拦截该更改。如果您可以直接写入状态（全局变量就是这种情况），那么您无法知道何时以及从何处应用更改，从而导致难以调试的应用程序。

Answer 4

在信息技术和计算机科学中，程序被描述 所说的状态，如果它被设计成记住前面的事件或用户 相互作用;记住的信息被称为 系统的状态。

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

因此，举例来说，你要跟踪的计数器，然后你需要像这样（以伪代码，而不是终极版的是，例如低于这个例子）：

// 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); 
}; 

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

来源：http://redux.js.org/

在终极版，国指同样的事情。 Redux只是一个库，它允许您使用良好的软件开发实践，使用redurs（状态增变器）和动作（用户/系统事件）等概念来跟踪程序的状态。

您的应用程序的整体状态被存储在一个对象树单店里面。这意味着你的应用程序的整个状态都是集中放置的。

改变状态树的唯一方法是发出一个动作，一个描述发生了什么事的对象。

若要指定动作如何转换状态树，请编写纯减速器。纯粹的还原剂就是所谓的pure function。

以下是减速机，（状态，行动）=>状态签名纯函数。它描述了一个动作是如何将状态改变成下一个状态：

import { createStore } from 'redux' 

function counter(state = 0, action) { 
    switch (action.type) { 
    case 'INCREMENT': 
    return state + 1 
    case 'DECREMENT': 
    return state - 1 
    default: 
    return state 
    } 
} 

// Create a Redux store holding the state of your app. 
// Its API is { subscribe, dispatch, getState }. 
let store = createStore(counter) 

// You can use subscribe() to update the UI in response to state changes. 
store.subscribe(() => 
    console.log(store.getState()) 
) 

// The only way to mutate the internal state is to dispatch an action. 
// The actions can be serialized, logged or stored and later replayed. 
store.dispatch({ type: 'INCREMENT' }) 
// 1 
store.dispatch({ type: 'INCREMENT' }) 
// 2 
store.dispatch({ type: 'DECREMENT' }) 
// 1 

来源：http://redux.js.org/

Answer 5

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