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

时间：2016-07-28 17:19:04

标签： reactjs redux react-redux

我正在使用React（使用Redux）中的组件，该组件具有以下要求：

  1. 从API端点检索数据。
  2. 显示该数据，其中一个字段可编辑。
  3. 如果编辑了可编辑字段，则必须更新其余字段并将其发送到其他端点。

    4. 我无法理解我应该如何使用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中的每个值。

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

1 个答案:

答案 0 :(得分：8)

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

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

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

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

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

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

相关问题
最新问题