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

Question

我正在查看这个来自 this article 的 redux super 基本实现的示例。我理解它，除了调度使用 prevState 的地方。首先这个函数从哪里获取 prevState ？这与计数器需求的实际状态有何关系？它是否隐式地在名为 prevState 的状态中设置另一个值？我只是很难理解状态实际上如何传递给调度，然后通过 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

react 好吧setState方法在这里负责 prevState – 不是 redux，只是为了清楚起见。

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

1. setState(nextState) - 只需传递下一个状态，React 就会相应地更新组件state
2. setState(nextState,callback) – 可以选择指定组件重新渲染后调用的回调 – 只要 state 更新，React 组件就会重新渲染– 注意:React 文档通常建议使用 componentDidUpdate而是使用生命周期方法。
3. setState((prevState, props) => nextState) – 使用一个函数调用，该函数可以方便地绑定(bind) prevState 和 props 标识符，以便我们手动更新我们的状态。预计我们提供的函数会返回下一个状态

所以你有这个

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

如果不明显，您提供的代码示例正在使用 #3。因此，第一个参数 prevState 将由 React 提供，它是组件的当前状态。这里没有使用第二个参数 props，因此我们将忽略它(总体思路是您可以使用 props 来更新您的状态(如果相关)。

<小时/>

什么是prevState？

prevState 到底是什么？好吧，我们确定它是组件的当前状态，我们之前在计数器中将其初始化为

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

因此，当我们发送 INCRMENT 时，我们会得到类似的内容

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

在这种情况下计数器( reducer )将返回

{value: 1}

此返回值是组件的下一个状态

<小时/>

重复应用setState

当然，如果我们再次INCRMENT，我们会得到类似的东西

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

计数器返回的位置

{value: 2}

成为组件的下一个状态

等等..

<小时/>

“React 和 Redux 之间的界线在哪里？”

首先，React 特定的代码是 import 和扩展 Component 的 Counter 类。

“那么另一个代码(计数器)是什么？”

redux 最酷的事情之一就是它的虚无状态 - Redux 仅作为一种模式存在于该代码示例中。没有使用 redux 或 react-redux 的 import 。 Redux 在这里更多地被用作 redux 思想/哲学的实现——它是围绕单向数据流和可组合 reducer 的思想构建的。

“什么是 reducer ？”

reducer 只是一个函数，当应用于状态和操作时，返回一个新状态。

当然，redux 库包含一些有用的实用程序，可以让您更轻松地在应用程序中实现 Redux 的模式 - 但实际上，它们都是非常简单的函数。事实上，Redux 的创建者 Dan Abramov 在 Egghead 上有一个很棒(免费)系列，Getting Started with Redux它向您展示了 Redux 的具体工作原理。在我看来，它是有史以来关于任何主题的最佳编码视频系列之一。