Update state in redux

Question

I am trying to update my states in redux. But I am clueless on how to do it:

here is the component:

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);

Now this will display an output like this:

Now when I check the checkbox, it should update the state of the corresponding row and put it in checked columns, basically updating the isChecked state. The reducer is here:

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;

could someone help me out?

Possible duplicate of [Whats the best way to update an object in an array in ReactJS?](https://stackoverflow.com/questions/28121272/whats-the-best-way-to-update-an-object-in-an-array-in-reactjs) — Emile Bergeron, Nov 25 '19 at 16:38
While the dupe target addresses the component's state, it's the same update code for the Redux state. — Emile Bergeron, Nov 25 '19 at 16:38

score 0 · Accepted Answer · answered Nov 25 '19 at 16:25

0

case 'CHANGECHK':
    return state.map( i => i.InsertionId === payload ? { ...i, isChecked: 1 } : i );

answered Nov 25 '19 at 16:25

Sergey

448
1
4
16

Hi, it is changing the state of all the data. could you look into this? – MAYANK KUMAR Nov 25 '19 at 16:32
it's hard to say anything without looking into details. Did you try to debug it and check why it happens? Is "InsertionId" different for all elements? Is it present in state? Is it passed correctly to rootReducer as payload? – Sergey Nov 27 '19 at 09:41

Update state in redux

1 Answers1