如何在react-redux中更新存储状态？

Question

我正在研究React（使用Redux）中的一个组件，它具有以下要求：

1. 从API端点检索数据。
2. 显示该数据，一个字段可编辑。
3. 如果编辑的字段进行编辑时 ，有更新的字段的其余部分，并将它们发送到不同的端点。

我无法理解我应该如何使用Redux方法实现编辑。

这是一个简化的组件：

class MyComponent extends Component {
  constructor(...args) {
    super(...args);
    this.props.dispatch(getDataFromEndpoint());
  }
  editField(e) {
    this.props.dispatch(editFieldAction(e.target.value));
  }
  render() {
    return (
      <div>
        <input type="text" defaultValue={this.props.data.editableField} onChange={this.editField} />
        {
          this.props.data.uneditable.map(x => {
            return (
              <span>{x}</span>
            );
          })
        }
      </div>
      );
  }
}

const mapProps = state => {
  const { data } = state.endpointData;
  return { data };
}

export default connect(mapProps)(MyComponent);

请注意，我已将此组件编写为示例，它可能有错误，但您应该明白这一点。 每当this.editField ，它都应该更新this.props.data.uneditable每个值。

这样做的正确方法是什么？

Answer 1

从某种意义上说，这些问题都归结为：如何连接我的组件以读取（和写入）Redux状态。 这基本上是redux-react的连接功能的目的（你在示例的底部有）。 您可以使用第一个参数mapStateToProps来从状态读取。 您使用第二个参数（您还没有） - mapDispatchToProps - 提供写入它的方法。 调度操作是您更新Redux状态的方式。

您可以简单地使用this.props.dispatch，但使用mapDispatchToProps更为惯用，它只提供一个对象，其中每个属性都是一个函数，它使用适当的动作创建者调用dispatch。 您可以接受作为参数，例如您要更新商店的数据。

当您想要更新状态（例如从输入中）时，最终发生的事情是在您的组件中，您使用与mapDispatchToProps连接的方法来调度具有相关数据的操作（更新的输入值），然后编写一个reducer响应操作并更新商店的相关部分。 然后Redux将在您的组件中触发重新渲染，它将从商店中提取更新的数据。

当然，异步操作的处理方式略有不同（这是您的API调用的方式），因为它们通常会随着时间的推移对状态进行多次更改。 通常类似于：

• 启动API请求。 （将动作发送到..）在您所在州的某处设置一个标志，表示API请求是“正在传输”。
• 收到回复。 （再次发送给..）在某处设置一个标志，表示请求已完成，如果成功，则将响应数据存储在某处。 如果是错误，请存储错误（或者只是存在错误）。

我建议为此目的使用redux-thunk，因为至少对我而言，最容易理解并使用所有各种库和方法来处理与redux的异步。 您不是调度包含描述操作的数据的对象，而是调度一个函数，这意味着您可以编写任何类型的逻辑，例如，允许您多次调度。 这样可以很容易地执行上面列出的步骤。只需要一个调用API的函数，然后在回调（或.then()方法中）中调度一个带有结果的操作。