Useselector Not Updating When Store Has Changed in Reducer. Reactjs Redux

useSelector not updating when store has changed in Reducer. ReactJS Redux

NOTE: you better start using redux-toolkit to prevent references
in you code its a better and almost a must way for using redux

the problem your facing is very common when handling with objects,
the props do not change because you're changing an object property but the object itself does not change from the react side.

even when you're giving it a whole new object
react doesn't see the property object change because the reference stays the same.

you need to create a new reference like this:

Object.assign(state.data,data);

return {
  ...state,
  data: { 
    ...state.data,
    Endereco: action.payload.logradouro,
    Bairro: action.payload.bairro,
    UF: action.payload.uf,
    Cidade: action.payload.cidade                    
  }
}

to add more you can learn about the Immer library that solves this
problem.

useSelector not updating with Redux Toolkit

Multiple Instances of Store

You create a store variable in your index.js file and pass that store to the react-redux Provider component. This is the store instance which all react-redux useSelector and useDispatch hooks will interact with.

In your HandleTestList.js file you create a different store variable. You then dispatch actions to that store, but those actions won't be reflected in your React app because this isn't the store that your React app uses.

handleTestList needs to either A) import the same global store variable. You will want to move this out of index.js and into store.js to avoid circular dependencies. or B) accept dispatch as an argument.

useSelector not firing after change in redux store

The problem is that your update logic does not match the returned data structure from the API.

Currently, you have this initial state:

const initialState = {
    category:[],
    current: null
}

and this logic in your categoryReducer:

return {
  ...state,
  ..action.payload
}

That logic will only work right if action.payload looks like {category: []}.

But, you showed that the data coming back from the server looks like:

[{ _id: "ksdj9dsfj", name: "monitor", description: "It is used to view what is on the system" }]

That is not an object, and it does not have a category field inside.

One fix here would be to change the reducer logic to look like:

return {
  ...state,
  category: action.payload
}

React-Redux. After changing state by useDispatch, components not updating by useSelector

Your selector is wrong.

Since you have

export default configureStore({
    reducer: {
        pagesInfo: pagesReducer,
    },
})

your pages slice is mounted as slice.pagesInfo.

So you need to do

useSelector(state => state.pagesInfo.currentElementId)

---

Related Topics