了解Redux |的基本实现prevState如何使用？

Question

我正在查看this article的redux的超级基本实现的示例。我了解它，除非派遣使用prevState。首先，这个函数从哪里获得prevState？这与计数器需要的实际状态有什么关系？它是否隐式地在名为prevState的状态中设置了另一个值？我只是很难理解状态是如何传递给dispatch，然后通过prevState反转的。我认为这可能是一个函数式编程思想，我还没有掌握。谢谢你帮助我理解！

import React, { Component } from 'react'; 
 

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

 
class Counter extends Component { 
 
    state = counter(undefined, {}); 
 
    
 
    dispatch(action) { 
 
    this.setState(prevState => counter(prevState, action)); 
 
    } 
 

 
    increment =() => { 
 
    this.dispatch({ type: 'INCREMENT' }); 
 
    }; 
 

 
    decrement =() => { 
 
    this.dispatch({ type: 'DECREMENT' }); 
 
    }; 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     {this.state.value} 
 
     <button onClick={this.increment}>+</button> 
 
     <button onClick={this.decrement}>-</button> 
 
     </div> 
 
    ) 
 
    } 
 
}

Answer 1

React.Component.prototype.setState

好反应的setState方法负责prevState这里 - 不终极版，仅仅是明确的。

让我们来看看如何使用setState。我们有选项...

1. setState(nextState) - 只是通过下一状态并作出反应将更新的组件state相应
2. setState(nextState, callback) - 选择指定一旦组件进行重新渲染被称为回调 - 只要更新了state，React组件就会重新渲染 - 注意：React文档通常建议使用componentDidUpdate生命周期方法。
3. setState((prevState, props) => nextState) - 使用方便地绑定prevState和props标识符的函数调用，以便我们手动更新状态。据预计，该功能我们提供返回下个状态

所以，你有这个

this.setState(prevState => counter(prevState, action)); 

如果不是很明显，你所提供的代码示例使用＃3。因此，第一个参数prevState将由React提供，这是组件的当前的状态。第二个参数props在这里没有使用，所以我们会忽略它（如果相关，你可以使用道具来更新你的状态）。

---

什么是prevState？

究竟是什么prevState？嗯，我们确定它是你的分量，我们在前面的计数器初始化为

state = counter(undefined, {}); 
// => { value: 0 } 

所以，当我们派遣一个INCREMENT我们会相处的

this.setState(prevState => counter({value: 0}, {type: 'INCREMENT'}) 

东西线的当前状态，其中情况counter（减速）将返回

{value: 1} 

此返回值是什么将成为下一个0123组件的状态

---

重复setState

当然，如果我们要再次INCREMENT应用程序，我们必须像

this.setState(prevState => counter({value: 1}, {type: 'INCREMENT'}) 

凡counter将返回

{value: 2} 

成为组件

等的下一个状态..

---

“哪里是反应，终极版之间的线？”

要启动时，阵营特定代码是import并且延伸Component的Counter类。

“但是其他代码是什么（counter）呢？”

关于REDX的最酷的事情之一是它的状态虚无 - Redux只存在于此代码示例中作为模式。没有import，它使用redux或react-redux。 Redux在此处更多地用作redux思想/原理的实现 - 它是围绕这种单向数据流和可组合减速器的思想构建的。

“什么是减速机？”

减速器只是一个函数，当应用于状态和动作时，返回一个新的状态。

当然，redux库包含一些有用的实用程序，可以更容易地在应用程序中实现Redux的模式 - 但实际上，它们都是非常简单的功能。实际上，Redux的创造者Dan Abramov在egghead上有一个真棒（免费）系列，Getting Started with Redux向您展示了Redux如何一件一件地工作。在我看来，它是有史以来创造的最佳编码视频系列之一，在的任何话题。

Answer 2

prevState在这种情况下是一个实际的，当前状态。它没有及时回溯，它只是返回当前的状态，这将用于建立一个新的状态 - 因为在Redux和React的概念中，状态为immutable，这意味着它永远不会被修改 - 当您发送新的动作和你的reducer处理 - 你正在创建一个全新的对象（状态）。

Answer 3

首先，请注意，类计数器从React的组件类型延伸。因为它会继承一堆属性和方法，其中之一是setState。

我们可以从它需要两个参数的React documentation for setState看到：

setState(nextState, callback) 

但在印刷精美，它说的：“的第一个参数可以是对象（含零个或多个键更新）或返回包含要更新的密钥的对象的状态和道具函数。“

在这种情况下，我们只传递一个参数，所以我们必须使用它，第一个参数是返回要更新的键的对象的函数。

如果我们再看看原来的代码在使用的setState：

this.setState(prevState => counter(prevState, action)); 

这可能是一个比较容易阅读和理解，如果我们在ES5 JavaScript语法写了这个：

this.setState(
    function cb(prevstate) { 
    return counter(prevstate, action) 
    }) 

所以在这种情况下，“prevState”是一个匿名函数的参数。从理论上讲，它可以被命名为任何东西，只要你在函数体内使用相同的名称来引用它，一切都会很好。然而，将它命名为“prevState”似乎是一个非常标准的事情（这就是React文档所使用的）。

如果我们把它看作纯粹的JavaScript，那么你传递给这个函数的应该是未定义的。

因此，发射增量行动多次应导致你的状态值始终为1，因为计数器功能总是会使用默认值：

state = { value: 0 } 

我想派遣函数看起来应该像这个：

dispatch(action) { 
    this.setState(counter(this.state, action)); 
} 

UPDATE

This link可以EXPL ain it better，但的确如果你使用函数作为setState的第一个参数，那么这个函数将把当前状态作为它的参数，这就是prevState如何得到它的值。