title: Update state in redux
body: <p>I am trying to update my states in redux. But I am clueless on how to do it:</p>
  
  <p>here is the component:</p>
  
  <pre><code>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(
              &lt;div&gt;
                  &lt;h1&gt;Welcome to My Task-Manager Page&lt;/h1&gt;
                  &lt;input type='text' placeholder='insert task'&gt;&lt;/input&gt;
                  &lt;button value='insert task'&gt;Insert task&lt;/button&gt;
                  &lt;h3&gt;Here are the tasks:&lt;/h3&gt;
                  &lt;h4&gt;Unchecked:&lt;/h4&gt;
                  {this.props.root.map((item,index)=&gt;{
                      if(item.isChecked===0)
                          return (&lt;div&gt;&lt;span key={index}&gt;{item.data}&lt;/span&gt;&lt;input type='checkbox' onClick={()=&gt;this.props.changeCheck(item.InsertionId)}&gt;&lt;/input&gt;&lt;/div&gt;)
                      return '';
                  })}
                  &lt;h4&gt;Checked:&lt;/h4&gt;
                  {this.props.root.map((item,index)=&gt;{
                      if(item.isChecked===1)
                          return (&lt;div&gt;&lt;span key={index}&gt;{item.data}&lt;/span&gt;&lt;input type='checkbox' checked="checked" onClick={()=&gt;this.props.changeCheck(item.InsertionId)}&gt;&lt;/input&gt;&lt;/div&gt;)
                      return '';
                  })}
              &lt;/div&gt;
          )
      }
  }
  const matchStatetoProps = (state) =&gt;{
      return {root:state.root};
  }
  
  const dispatchStatetoProps = (dispatch) =&gt;{
      return{
          fetchtsk:()=&gt; dispatch(fetchTasks),
          changeCheck: (InsertionId)=&gt; dispatch({type:'CHANGECHK',payload:InsertionId})
      }
  }
  
  export default connect(matchStatetoProps,dispatchStatetoProps)(Homepage);
  </code></pre>
  
  <p>Now this will display an output like this:</p>
  
  <p><a href="https://i.stack.imgur.com/HZVLo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HZVLo.png" alt="enter image description here"></a></p>
  
  <p>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:</p>
  
  <pre><code>var initState=[];
  
  const rootReducer = (state=initState,{type,payload})=&gt;{
      switch(type){
          case 'DISPLAY': 
              var ar=[];
              payload.map((item)=&gt;{
                  ar.push({insertionId:item.InsertionId,data:item.Data,isChecked:0});
                  return ar;
              });
              return ar;
          case 'CHANGECHK':
                  ??????????????????????????????????
          default:return state;
      }
  }
  
  export default rootReducer;
  </code></pre>
  
  <p>could someone help me out?</p>