如何更新react-redux中的商店状态？

我的工作有到要求做出反应（与终极版）的组件上：从API端点如何更新react-redux中的商店状态？

Retreive数据。
显示数据，其中一个字段是可编辑的。
如果可编辑字段为已编辑，则必须更新其余字段并将它们发送到不同的端点。

我无法掌握如何使用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中的每个值。

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

来源

2016-07-28 ItsGreg

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

您可以简单地使用this.props.dispatch，但它是更地道使用mapDispatchToProps，它只是提供了一个对象，其中每个属性是它要求与适当的行动的创建者发送的功能。您可能会接受一个参数，例如您正在寻找更新商店的数据。

当您想要更新状态（例如从输入）时，您的组件发生了什么，您使用与mapDispatchToProps联系的方法来分派具有相关数据（更新的输入值）的操作，然后编写一个响应动作并更新商店相关部分的减速器。然后，Redux将触发组件中的重新渲染，并将从商店中提取更新的数据。

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

开始API请求。（将动作分配给..）在您的状态的某个地方设置一个标志，指示API请求处于“过境”状态。
接收回应。（再次发送到..）设置一个标志，说明请求已完成，如果成功，则将响应数据存储在某处。如果这是一个错误，请存储错误（或者只是出现错误）。

为此，我会推荐使用redux-thunk，因为至少对我来说，它是理解和处理所有各种库和方法以处理与redux异步的最简单方法。而不是派发一个包含描述动作的数据的对象，而是派发一个函数，这意味着您可以编写任何类型的逻辑，例如允许您分派多次。这使得上面概述的步骤变得很容易。只需要一个调用API的函数，并在回调（或方法.then()）中调用结果的操作。

来源

2016-07-28 17:57:02 John

换句话说，如果您想要更新本地和远程状态（即更新您的本地存储并使用相同的数据发送到服务器进行API调用），这对于thunk来说是个好例子，因为你既可以发送一个动作来更新你的本地存储，也可以在同一个thunk中发送API请求。 – John

伟大的探索。我应该传递给mapDispatchToProps函数，以及它需要什么参数，所以我可以更新storebstate？ – ItsGreg

那么这只取决于你想如何在商店中建模数据。比方说，例如你有一个'人'的对象，其中包含字段'名称'和'地址'。你可以有两个不同的动作（比如'updateName'和'updateAddress'），在这种情况下，你可能只传入一个字符串，从你的文本输入的onChange事件中获取（用于新的输入值）。或者你可以有一个单独的动作（可能是'updatePerson'），它会包含更新后的人物对象，在这种情况下，你可以用整个人物对象分派一个动作;即使只有1个字段发生了变化 – John

如何更新react-redux中的商店状态？

回答

相关问题