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')
)
Source: stackoverflow.com
Related Query
- React/Redux not triggering child render on state update
- React component not updating on final dispatch and update of redux state
- React redux - parent state changing, but child components not re-rendering
- react stateless child components do not update on state change in parent component
- React Redux update state from dumb child
- reducer does not update state in react redux
- How to update redux state using a react variable passed up to the component from a child
- React lifecycle hooks not working on redux state update
- React component does not update with the change in redux state
- React 16.0.0 Parent Child GrandChild. Updating state in Parent does not update GrandChild
- React component not updating on redux state update
- react render state child component vars not updated?
- Callback function, responsible for updating state, passed as props to child component not triggering a state update
- react child props does not update when sending updated parent state
- Even after redux state update mapStateToProps not returning updated props to components in react
- React - Redux State update but not rendered in the component
- Firebase Redux update not triggering render
- React Child Component Not Updating After Parent State Change
- onChange event for React child component to update state
- UI not re-rendering on state update using React Hooks and form submission
- Can not update state inside setInterval in react hook
- React refs do not update between render
- Update React Hooks State During Render Using useMemo
- Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead
- Props not updating when redux state change in React Hooks
- React does not refresh after an update on the state (an array of objects)
- React not re-rendering after array state update
- React update state if image not found.
- How to update (re-render) the child components in React when the parent's state change?
- How to stop re render child component when any state changed in react js?
More Query from same tag
- React Redux update item quantity (more than just one increment)
- react-router 4.1.1 returning 404's
- react pass props from child to parent undefined
- Updating nested state in react immutably
- Issue with running npm start. Weird error
- Pass data across Screens
- How to add debounce to useElementSize hook?
- Set react element active
- import React, from { useState } 'react'; not working
- React error when using audio.play() function
- How to get id/params to redux action from react Router?
- How to pass props to subcomponent in Reactjs
- Adding silent renew entry point to React(create-react-app)
- Use options to change URL in Nextjs with React-select
- module not found, React
- how to style svg in reactjs with styled components
- Why function onClick run by render, in setState?
- How Do I Replace UploadCare To Display Image in React
- Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'
- Set MUI Theme for Specific React Page
- Trouble disabling react-hooks/exhaustive-deps warning when using redux action creator inside useEffect hook
- Preload data in reactjs component
- Custom TTF fonts loading slowly in React app
- How to set icons on the right side of an Appbar using material UI
- Javastript syntax in quotes
- Why is the NavLink redirecting me to the end section of a Components in React
- Prevent header menu to re render when navigating through page - reactjs
- fetching multiple data using firebase/firestore on the server side (nextjs/apiRoutes) =problem => output before the data is ready
- How to get back previous state in ReactJS Class Component
- Conditionally mount components based on their return value