如何在刷新页面后实时更新数组(Redux)

Question

我正在做待办事项列表，并希望完成功能。当您单击按钮"完成"时，文本将被划掉。我用字段为"text"one_answers"isDone"的交易完成了数组。isDone默认为false，当点击时，我会得到所有包含交易的数组和您点击的文本交易。然后我用我得到的交易映射数组，并比较点击交易的文本和数组中所有交易的文本。如果它们相同，我将isDone从false改为true。但如果我刷新页面，它会更新，我需要它在点击时更新数据。我使用redux-persistent，并将所有状态放入本地存储

按钮

<button onClick={()=>this.props.done(this.props.deals,value.text)}>Done</button>

行动

export function done(newDeals,dealText){
return(dispatch) =>{
newDeals.map(value=>{
if(value.text === dealText){
value.isDone = !value.isDone
}
})
dispatch(doneDeal(newDeals));
}
}
export function doneDeal(newDeals){
return{
type: DONE,
newDeals
}
}

还原剂

export default function toDoList(state = initialState, action){
switch(action.type){
case DONE:
return { 
...state, deals: action.newDeals
}
default:
return state
}
}

我删除了对这个例子没有意义的代码，但需要更多信息，请询问我会告诉你非常感谢。

Answer 1

您必须使用mapStateToProps从Redux状态获取最近更新的状态。

您所需要的只是用以下内容包装您的组件导出：

const mapStateToProps = state => ({
deals: state.deals
});
export default connect(mapStateToProps)(ComponentName);

这样，您就可以从您在reducer中定义的initialState中获得所需的状态数据，并且对这些数据的引用是"deals"，它可以用作普通道具：在类组件的情况下为this.props.deals，在功能组件的情况中通过对({deals})进行解结构来用作参数。

我不知道组件的完整结构，因为你还没有添加它，但这是从redux中获取状态的正确方法。

为了让你更清楚，你可以通过这个链接阅读更多内容：https://react-redux.js.org/using-react-redux/connect-mapstate

---

更新：我在添加您的回复后发现了您的问题。这里的代码有问题：<button onClick={()=>this.props.done(this.props.deals,value.text)}>Done</button>

您直接从Redux全局状态获得交易，在调度操作时，您直接在调度方法中传递它们。因此，您的组件无法侦听组件发生的任何更改。您需要保存您所在州的交易：

state = {
deals: this.props.deals
}

并将onClick更改为以下内容：

<button onClick={()=>this.props.done(this.state.deals,value.text)}>Done</button>