How to trigger off callback after updating state in Redux?

by

component should be updated to receive new props.

there are ways to achieve your goal:

1. componentDidUpdate check if value is changed, then do something..

 componentDidUpdate(prevProps){
     if(prevProps.value !== this.props.value){ alert(prevProps.value) }
  }

2. redux-promise ( middleware will dispatch the resolved value of the promise)

export const updateState = (key, value)=>
Promise.resolve({
  type:'UPDATE_STATE',
  key, value
})

then in component

this.props.dispatch(updateState(key, value)).then(()=>{
   alert(this.props.value)
})

2. redux-thunk

export const updateState = (key, value) => dispatch => {
  dispatch({
    type: 'UPDATE_STATE',
    key,
    value,
  });
  return Promise.resolve();
};

then in component

this.props.dispatch(updateState(key, value)).then(()=>{
   alert(this.props.value)
})

More Related Contents:

  1. Why do we need middleware for async flow in Redux?
  2. When to use ES6 class based React components vs. functional ES6 React components?
  3. Why is my onClick being called on render? – React.js
  4. Await is a reserved word error inside async function
  5. How to overcome the CORS issue in ReactJS
  6. Is this the correct way to delete an item using redux?
  7. React: how to load and render external html file?
  8. Is store.dispatch in Redux synchronous or asynchronous
  9. Updating nested data in redux store
  10. Cleaner/shorter way to update nested state in Redux?
  11. How do I access store state in React Redux?
  12. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  13. redux fetch body is not use with no cors mode
  14. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  15. Read Store’s Initial State in Redux Reducer
  16. How to sync Redux state and url hash tag params
  17. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  18. Cannot update a component while rendering a different component warning
  19. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  20. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  21. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  22. having multiple instance of same reusable redux react components on the same page/route
  23. Global state in React Native
  24. Update single value in item array | react redux
  25. Redux Presentational Components Vs Container Component
  26. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  27. Component won’t update when a redux state change occurs
  28. React-Redux: Should all component states be kept in Redux Store
  29. Could not find “store” in either the context or props of “Connect(App)”
  30. How to get simple dispatch from this.props using connect w/ Redux?

Leave a Comment