score:2
you are returning a wrong shape of state in your reducer. your related code:
export default function(state = initialstate, action) {
switch (action.type) {
case get_users:
return [
...state
];
default:
return state;
}
}
here, state is an object but you are returning it in an array by spreading it. so, your state gets broken.
try it like that:
case get_users:
return state;
as @idan dagan pointed out in his answer, actually we do not mutate state in our reducers. i just gave this suggestion since you are just playing around to learn redux and we are returning the original state here, nothing more. but, this is a suitable and better way to return the state:
case get_users:
return { ...state };
here is a working code: https://codesandbox.io/s/k5ymxwknpv
i also changed foreach
with map
again as @idan dagan suggested. i haden't realized that. foreach
is not the suitable method here since actually it does not return anything. you want to map through your arrays in react and render them.
also, your state name is confusing :) user.users
is a little bit weird, you can think a better one maybe.
edit after comments
your get_users action actually is being hit, but you are checking it wrong in your code. you are doing:
export default function(state = initialstate, action) {
switch (action.type) {
case get_users:
return object.assign({}, state);
default:
return {
users: [
{ id: 1, name: "test" },
{ id: 2, name: "test1" },
{ id: 3, name: "test2" }
]
};
}
}
what happens here? first action of redux is init
. this is the initialization of your state. now, since there is no certain action, your reducer hits the default case and returns the test one. now, your state becomes this test data. then your get_users
is hit and you return a new object which merges the state which is the test one. here is the steps:
first, state is the `initialstate` -> `init` runs and hits the default case
state is now test one -> get_users hit and returns the `state` which is test one
you see the test one.
how can you test your actions? just put a console.log
in your reducer:
export default function(state = initialstate, action) {
console.log("state",state);
console.log("action",action);
.....
and see get_users actually is being hit. the other option is instead of returning the merged object with state
, try to merge it with initialstate
or with spread operator return a new object by using initialstate
:
return return object.assign({}, initialstate);
or
return {...initialstate}
last option provides you a little bit more understanding how my first explanation works. try to return this for your get_users:
return {...state, users:[...state.users, {id:4, name: "foo"}]};
you will see a users list with test data but the last one will be your foo
. this explains how you loose your initialstate
if you return anything beside state
in your default case.
last suggestion, you can debug your redux development with redux dev tools. it is a great tool and does much more than debugging. you can easily track all your operations for redux.
score:0
i'm not sure what are you trying to do with the new state.
but there is couple of changes that you need to do:
- use map instead of foreach (because you want to return a new array).
- at the reducer you can return the state like this:
export default function(state = initialstate, action) {
switch (action.type) {
case get_users:
return object.assign({}, state);
default:
return state;
}
}
as mention in redux docs:
we don't mutate the state. we create a copy with object.assign()
.
Source: stackoverflow.com
Related Query
- Array gets undefined - React Redux
- i can see array of objects coming in my http get request from python django but data gets converted into undefined when it comes inside jsx react
- Cannot read property '.then' of undefined when testing async action creators with redux and react
- Update array object in React Redux reducer
- Update single value in item array | react redux
- React Navigation: How to update navigation title for parent, when value comes from redux and gets updated in child?
- update/merge array values in React Redux store correctly without duplicates
- React Redux Cannot read property 'dispatch' of undefined
- react / redux - cannot read property "yyy" of undefined
- Testing React Redux - cannot read properties of undefined, or wrapper undefined
- How to connect each element of array individually by using react redux
- React / Typescript : pushing obj into array of object and undefined type
- How to get best practice React Redux nested array data?
- React + Redux Simple Router : cannot find listen of undefined
- Why React Redux context.store is undefined in child component?
- React button mapped from an array value undefined
- React this.state undefined array
- Promise.all() inside useEffect in react returns an array of undefined items
- React Redux Flowtype "property not found" in React element that gets properties from redux connect
- React redux - issues adding multiple items to an array in state tree object
- react redux merge state with given array
- Testing in React with preloadedState: redux store gets out of sync when having a manual import of store in a function
- Faced TypeError: Cannot read property 'counter' of undefined when using Redux in React
- react redux props undefined on event listener when using mapDispatchToProps
- React Redux - cannot use a pass down a component's method to the children - undefined error
- Redux Added Array of Object Inside Another Aray in React
- React Redux : My React component not receive updated array as props
- React js: ErrorTypeError - Can't read property of undefined array
- React - unique key in object gets overwritten when updating state array
- Array missing in react redux reducer
More Query from same tag
- I have issue with React forms when I try to post form with file type input
- Axios returns index.html content to frontend (React.js)
- React-router: how to get previous path using Link
- Page renders faster than fetching the data and displaying it
- React JS on submit remove input fields and display "Thank You" only
- Javascript - convert an EXTRA LARGE Number to string in JSON before the default parsing
- :Active works in styled components but :checked doesn't
- clearInterval not clearing after setInterval parameter value is updated
- Preserve white space line breaks in tinymce wysiwyg editor
- Import css variable to the tsx file in next.js
- Compiled CSS is not being attached to JSX in react build
- How can I conditionally do POST request in React?
- react-virtuoso: overscan props does not work
- How to pass multiple GTM tags in gatsby-plugin-google-tagmanager plugin?
- ReactJS Additional Select property
- React Material-UI checkbox onChange event does not fire
- React: Don't render components in table who aren't visible
- React functional component not re-rendering on its own state change
- How do I return my original list on the 3rd click?
- How to render reusable component one at a time in reactjs?
- issue with cross-site cookies: how to set cookie from backend to frontend
- React - how to render multiple buttons with a regular for loop?
- In React, what is the difference between declaring 'const' or 'let' between render() { return()} vs class extends component{render(){}}?
- How to Extract the id from a class div in react JS such that i can assign the value of div id to a variable in my code
- Is there a way to make required typescript values optional if certain value is provided?
- Get method is being called infinitely
- React useState with ES6 classes
- React setstate method's callback is not fired
- Unexpected user of comma operator no-sequences
- "npm start" doesn't work tried "resmon" but couldn't find cmd.exe in the resource monitor