Redux state not updating right away?

redux props not updating
react component not 're rendering on redux state change
componentwillreceiveprops
redux selector not updating
redux state doesn t update
useselector not updating
dispatch not updating state
mapstatetoprops not called when state changes

setCurrentPage just stores the object into a page object in my global store. so if i try to access it RIGHT after i set it.. it seems like there's a delay and the object is empty. but if i console.log the same object in a button after and click it.. it's populated.

is there a lag in redux that I dont know about? what can I do to get this to work? it's messing up my code...

thanks for any help

// initialState.js // my global redux store
playlist: {
  currentPage: {}
}

// someComponent
let tempPage = new Page();
tempPage.controlNode = someAPItoGetControlNode();  //synchronous
this.props.actions.setCurrentPage(tempPage);  //tempPage.controlNode contains object correctly
console.log(this.props.currentPage);  //empty object.  WHY???

// in some function in the same component i call in a button
function seeCurrentPage() {
  console.log(this.props.currentPage);  //works!  
}

// reducer
case types.SET_CURRENT_PAGE: {
  action.pageObj.selected = true;
  return Object.assign({}, state, {currentPage: action.pageObj});
}

// action
export function setCurrentPage(pageObj) {
  return { type: types.SET_CURRENT_PAGE, pageObj: pageObj };
}

The reason for a delayed information is not because of redux, but because of the asynchronous execution of your component.

// someComponent
let tempPage = new Page();
tempPage.controlNode = someAPItoGetControlNode();  //synchronous
this.props.actions.setCurrentPage(tempPage);  //tempPage.controlNode contains object correctly
console.log(this.props.currentPage);  

In the above code, your component fires an action and then immediately after logs this.props.currentPage. However by that time the redux store would not have updated and hence you get an older result

What you can do is log in the componentWillReceiveProps function like

componentWillReceiveProps(nextProps) {
     console.log(nextProps.currentPage)
}

Why isn't my React component updating (using Redux)?, Why oh why doesn't that React component update? You have done everything right! You know that. Ok, now we are ready to learn why Redux operates with immutable data only! When an action When Redux cannot see that the state has changed, it will not update the React components with new data from the state. Redux restricts updating the state to this method only. This strict way of updating the state ensures that the state can not be changed directly either by view or any network callback. The only way to update a state is by defining the action and then dispatching it. Remember that actions are plain JavaScript objects.

After the Redux store is updated, your component will need to re-render.

So you can just write the console.log in componentWillReceiveProps(nextProps) or componentDidUpdate(), then you can access to the new data from the store.

Troubleshooting, It is tempting to modify the state or action passed to you by Redux. what lets react-redux efficiently subscribe to fine-grained updates of your state. This way you don't override the previous state . If you define an action creator, calling it will not automatically dispatch the action. #Make sure mapStateToProps is correct. Redux restricts updating the state to this method only. This strict way of updating the state ensures that the state can not be changed directly either by view or any network callback. The only way

I just ran into this also. It is an asynchronous issue when updating props like everyone is saying. I solved it by using async await. If you want to get the updated props immediately then you can do something like:

    async function myFunction () {
      await this.props.actions.setCurrentPage(tempPage);
      console.log(this.props.currentPage); // shows updated props
    }

In this code the console log waits for the async operation to complete then gets your props.

Store change not immediately visible to component · Issue #1313 , componentDidUpdate dispatch action, then call reducer to update store timdorr changed the title react-redux v6.0.1 store change not doing so now as part of my work-around for this issue - but it's certainly not my intention. Sometimes, you are trying to dispatch an action, but your view does not update. Why does this happen? There may be several reasons for this. #Never mutate reducer arguments. It is tempting to modify the state or action passed to you by Redux. Don't do this! Redux assumes that you never mutate the objects it gives to you in the reducer.

Why is my application state not updating (redux), The component state changed. Your component `App` right now neither update the store or receive different props. Here is what is happening to  I encounter synchronous props that is mapped from state after updating props with dispatch issue. In JSX, when I change select dropdown, then trigger handleChange method.

My redux store updates but react view doesn't - JavaScript, My redux store updates but react view doesn't As are problems with the key in lists and not referencing the props/state properly. Thank you very much for your help and time . yes it now works as expected I thought that  There are a number of community packages that implement various approaches for storing per-component state in a Redux store instead, such as redux-ui, redux-component, redux-react-local, and more. It's also possible to apply Redux's principles and concept of reducers to the task of updating local component state as well, along the lines of this

An intro to Redux and how state is updated in a Redux application, There is no other way to interact with a state inside the store except through these given methods. Let's talk about the methods a store gives us to  The key to updating nested data is that every level of nesting must be copied and updated appropriately. This is often a difficult concept for those learning Redux, and there are some specific problems that frequently occur when trying to update nested objects. These lead to accidental direct mutation, and should be avoided.

Comments
  • Redux store updates synchronously, but your component doesn't
  • @AlexeyTen so each line of code in my component doesn't wait for the line before it? can you verify if that's what you mean? how can I get this to work then?
  • It waits. But store and props are not directly connected, so changes in store does not immediately propagate to props