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

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

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

我很难理解我应该如何使用Redux metodology实现编辑。

这里有一个简化的组件：

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中的每个值。

正确的方法是什么？

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

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

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

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

启动API请求。（将操作分派到..）在您的状态中的某个位置设置一个标志，指示API请求"正在传输中"
接收响应。（再次发送到..）在某处设置一个标志，表示请求已完成，如果成功，请将响应数据存储在某处。如果是错误，请存储错误（或者只是存在错误的事实）

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

相关内容

最新更新

热门标签：