React: problems with …spreading

I'm trying to recreate the Redux example from Dan Abramov's course. Spreading the ...store.getState() at App level does not work, Redux is changing the state and React does not re-render.

...store.getState()

When I replace line 121 with line 123, the code throws an error.

Full code is here: https://github.com/asaadsaad/redux-react-code/blob/master/13-redux.html

State object:
todos: [id, text, completed], visivility: 'ALL'

todos: [id, text, completed], visivility: 'ALL'

This line works fine:
<TodoApp todos=store.getState().todos visibility=store.getState().visivility />

<TodoApp todos=store.getState().todos visibility=store.getState().visivility />

This line does not work:
<TodoApp ...store.getState() />

<TodoApp ...store.getState() />

Why is this happening?

1 Answer
1

You have a typo in your combineReducer's part:

combineReducer

const appReducer = combineReducers(
todos: todos_reducer,
visivility: visibility_reducer
)


Change it to: visivility -> visibility

visivility -> visibility

So, why this works with the original one? See:

visibility=store.getState().visivility


Here, you are passing store.getState().visivility state as visibility to your App. Typo fixed here by luck. But when you spread the object visivility goes as it is.

store.getState().visivility

visibility

visivility

console.log

todo

visibility

TodosList

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.