如何更新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
中的每个值。
这样做的正确方法是什么?
从某种意义上说,这些问题都归结为:如何连接我的组件以读取(并写入)Redux状态。这基本上是redux-react的连接函数的目的(你在例子的底部)。您可以使用第一个参数mapStateToProps来读取状态。您使用第二个参数(您还没有) - mapDispatchToProps - 提供写入它的方法。分派动作是您更新Redux状态的方式。
您可以简单地使用this.props.dispatch,但它是更地道使用mapDispatchToProps,它只是提供了一个对象,其中每个属性是它要求与适当的行动的创建者发送的功能。您可能会接受一个参数,例如您正在寻找更新商店的数据。
当您想要更新状态(例如从输入)时,您的组件发生了什么,您使用与mapDispatchToProps联系的方法来分派具有相关数据(更新的输入值)的操作,然后编写一个响应动作并更新商店相关部分的减速器。然后,Redux将触发组件中的重新渲染,并将从商店中提取更新的数据。
当然,异步操作处理方式有点不同(这是您的API调用的方式),因为它们通常会随着时间的推移而对状态进行一些更改。通常是这样的:
- 开始API请求。 (将动作分配给..)在您的状态的某个地方设置一个标志,指示API请求处于“过境”状态。
- 接收回应。 (再次发送到..)设置一个标志,说明请求已完成,如果成功,则将响应数据存储在某处。如果这是一个错误,请存储错误(或者只是出现错误)。
为此,我会推荐使用redux-thunk,因为至少对我来说,它是理解和处理所有各种库和方法以处理与redux异步的最简单方法。而不是派发一个包含描述动作的数据的对象,而是派发一个函数,这意味着您可以编写任何类型的逻辑,例如允许您分派多次。这使得上面概述的步骤变得很容易。只需要一个调用API的函数,并在回调(或方法.then()
)中调用结果的操作。
换句话说,如果您想要更新本地和远程状态(即更新您的本地存储并使用相同的数据发送到服务器进行API调用),这对于thunk来说是个好例子,因为你既可以发送一个动作来更新你的本地存储,也可以在同一个thunk中发送API请求。 – John
伟大的探索。我应该传递给mapDispatchToProps函数,以及它需要什么参数,所以我可以更新storebstate? – ItsGreg
那么这只取决于你想如何在商店中建模数据。比方说,例如你有一个'人'的对象,其中包含字段'名称'和'地址'。你可以有两个不同的动作(比如'updateName'和'updateAddress'),在这种情况下,你可能只传入一个字符串,从你的文本输入的onChange事件中获取(用于新的输入值)。或者你可以有一个单独的动作(可能是'updatePerson'),它会包含更新后的人物对象,在这种情况下,你可以用整个人物对象分派一个动作;即使只有1个字段发生了变化 – John