如何在不刷新页面后实时更新阵列(Redux)

我正在做待办事项列表,并希望在单击“完成”按钮时执行功能,文本将被划掉。 我完成了具有“文本”和“ isDone”字段的交易的数组。 isDone默认为false,在单击时,我会得到您单击的所有带有交易和文本交易的数组。比起我用交易获得的交易来映射数组,并比较点击交易和交易中所有交易中的文本。如果它们相同,我将isDone从false更改为true。 但是,如果我刷新页面,并且单击时需要更新数据,它将更新。 我使用redux-persist并将所有状态放入localStorage

纽扣

<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
    }
}

我删除了这个示例没有意义的代码,但是需要更多信息,请问我会告诉 谢谢!

评论
  • mex
    mex 回复

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

    您所需要做的就是用以下内容包装组件导出:

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

    By this you are getting the needed state data from the initialState you have defined in your reducer and the reference to these data is the "deals" which can be used as normal prop: this.props.deals in case of class component OR as parameter through descructureing ({deals}) in case of functional component.

    我不知道该组件的完整结构,因为您尚未添加它,但这是从redux获取状态的正确方法。

    To make things more clear for you, you can read more through this link: https://react-redux.js.org/using-react-redux/connect-mapstate