score:2

check that you return a new object as a state in your reducer. ex: return object.assign ({}, state, {items: [...olditems, newitem]})

pay attention here [...olditems, newitem] this will create new array. in your case object.assign is doing only shallow copy and actually items changed but holds the same reference. have a look at working example:

import react from 'react';                                                                                               
import { render } from 'react-dom';                                                                                      
import { connect, provider } from 'react-redux';                                                                         

import { createstore } from 'redux';                                                                                     

var defaultstate = { todo: { items: [] } }                                                                               

const add_todo = 1;                                                                                                      
const complete_todo = 2;                                                                                                 
const delete_todo = 3;                                                                                                   
const clear_todo = 4;                                                                                                    

const addtodo = (message) => { return {type: add_todo, message: message, completed: false} };                            
const completetodo = (index) => { return {type: complete_todo, index:index} };                                           
const deletetodo = (index) => { return {type: delete_todo, index:index} };                                               
const cleartodo = (index) => { return {type: clear_todo, index:index} };                                                 

function todoreducer(state,action) {                                                                                     
    switch(action.type) {                                                                                                
        case add_todo:                                                                                                   
            var newitem = {message:action.message,completed:false};                                                      
            return object.assign({},state, {todo: {items: [...state.todo.items, newitem]}});                             
        case complete_todo:                                                                                              
            var newstate = object.assign({},state);                                                                      
            newstate.todo.items[action.index].completed = true;                                                          
            return newstate;                                                                                             
        case delete_todo:                                                                                                
            var items = [].concat(state.todo.items);                                                                     
            items.splice(action.index,1);                                                                                
            return object.assign({},state,{                                                                              
                todo: {                                                                                                  
                    items:items                                                                                          
                }                                                                                                        
            });                                                                                                          
        case clear_todo:                                                                                                 
            return object.assign({},state,{                                                                              
                todo: {                                                                                                  
                    items: []                                                                                            
                }                                                                                                        
            });                                                                                                          
        default:                                                                                                         
            return state;                                                                                                
    }                                                                                                                    
}                                                                                                                        

var store = createstore(todoreducer,defaultstate);                                                                       

class addtodoform extends react.component {                                                                              
    render() {                                                                                                           
        return <button onclick={this.props.onaddtodo}>test</button>                                                      
    }                                                                                                                    
}                                                                                                                        

class todoitem extends react.component {                                                                                 
    render() {                                                                                                           
        return <span>item</span>                                                                                         
    }                                                                                                                    
}                                                                                                                        

let todolist = ({items}) => (                                                                                            
  <ul>                                                                                                                   
      {items.map((item,index) =>                                                                                         
        <todoitem key={index} index={index} message={item.message} completed={item.completed}/>                          
      )}                                                                                                                 
  </ul>                                                                                                                  
)                                                                                                                        

let todocomponent = ({ items, onaddtodo, oncompletetodo, ondeletetodo, oncleartodo }) => /* expand's props */            
  (                                                                                                                      
    <div>                                                                                                                
        <h1>todo</h1>                                                                                                    
        <addtodoform onaddtodo={onaddtodo} message/>                                                                     
        <todolist items={items} oncompletetodo={oncompletetodo} ondeletetodo={ondeletetodo} oncleartodo={oncleartodo}/>  
    </div>                                                                                                               
  )                                                                                                                      

const mapstatetoprops = (state) => {                                                                                     
    return {                                                                                                             
        items: state.todo.items                                                                                          
    }                                                                                                                    
}                                                                                                                        

const mapdispatchtoprops = (dispatch) => {                                                                               
    return {                                                                                                             
        onaddtodo(message) {                                                                                             
            dispatch(addtodo(message))                                                                                   
        },                                                                                                               
        oncompletetodo(index) {                                                                                          
            dispatch(completetodo(index))                                                                                
        },                                                                                                               
        ondeletetodo(index) {                                                                                            
            dispatch(deletetodo(index))                                                                                  
        },                                                                                                               
        oncleartodo(index) {                                                                                             
            dispatch(cleartodo(index))                                                                                   
        }                                                                                                                
    }                                                                                                                    
}                                                                                                                        

var wrapper = connect(mapstatetoprops,mapdispatchtoprops)(todocomponent);                                                

render(                                                                                                                  
  <provider store={store}>                                                                                               
      <wrapper />                                                                                                        
  </provider>,                                                                                                           
  document.getelementbyid('app')                                                                                         
)

Related Query

More Query from same tag