javascript - 在 redux 中更新状态

问题描述

我正在尝试在 redux 中更新我的状态。但我对如何做到这一点一无所知：

这是组件：

import React from 'react';
import {connect} from 'react-redux';
import fetchTasks from '../actions/getTasks';

class Homepage extends React.Component{
    componentDidMount(){
        this.props.fetchtsk();
    }
    render(){
        return(
            <div>
                <h1>Welcome to My Task-Manager Page</h1>
                <input type='text' placeholder='insert task'></input>
                <button value='insert task'>Insert task</button>
                <h3>Here are the tasks:</h3>
                <h4>Unchecked:</h4>
                {this.props.root.map((item,index)=>{
                    if(item.isChecked===0)
                        return (<div><span key={index}>{item.data}</span><input type='checkbox' onClick={()=>this.props.changeCheck(item.InsertionId)}></input></div>)
                    return '';
                })}
                <h4>Checked:</h4>
                {this.props.root.map((item,index)=>{
                    if(item.isChecked===1)
                        return (<div><span key={index}>{item.data}</span><input type='checkbox' checked="checked" onClick={()=>this.props.changeCheck(item.InsertionId)}></input></div>)
                    return '';
                })}
            </div>
        )
    }
}
const matchStatetoProps = (state) =>{
    return {root:state.root};
}

const dispatchStatetoProps = (dispatch) =>{
    return{
        fetchtsk:()=> dispatch(fetchTasks),
        changeCheck: (InsertionId)=> dispatch({type:'CHANGECHK',payload:InsertionId})
    }
}

export default connect(matchStatetoProps,dispatchStatetoProps)(Homepage);

现在这将显示如下输出：

现在当我选中复选框时，它应该更新相应行的状态并将其放入选中的列中，基本上更新 isChecked 状态。减速机在这里：

var initState=[];

const rootReducer = (state=initState,{type,payload})=>{
    switch(type){
        case 'DISPLAY': 
            var ar=[];
            payload.map((item)=>{
                ar.push({insertionId:item.InsertionId,data:item.Data,isChecked:0});
                return ar;
            });
            return ar;
        case 'CHANGECHK':
                ??????????????????????????????????
        default:return state;
    }
}

export default rootReducer;

有人可以帮帮我吗？

标签： javascriptreactjsredux

javascript - 在 redux 中更新状态

问题描述

解决方案

推荐阅读