How to trigger off callback after updating state in Redux?

In React, state is not be updated instantly, so we can use callback in setState(state, callback). But how to do it in Redux?

After calling the this.props.dispatch(updateState(key, value)), I need to do something with the updated state immediately.

Is there any way I can call a callback with the latest state like what I do in React?

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)
})

With Hooks API:

useEffect with the prop as input.

import React, { useEffect} from 'react'
import { useSelector } from 'react-redux'

export default function ValueComponent() {
   const value = useSelector(store => store.pathTo.value)

   useEffect(() => {
     console.log('New value', value) 
     return () => {
        console.log('Prev value', value) 
     }

   }, [value])

   return <div> {value} </div>
}

The most important point about React is one-way data flow. In your example that means, that dispatching an action and state change handling should be decoupled.

You shouldn't think like "I did A, now X becomes Y and I handle it", but "What do I do when X becomes Y", without any relation to A. Store state can be updated from mutiple sources, in addition to your component, Time Travel also can change state and it will not be passed through your A dispatch point.

Basically that means that you should use componentWillReceiveProps as it was proposed by @Utro

You could use subscribe listener and it will be called when an action is dispatched. Inside the listener you will get the latest store data.

http://redux.js.org/docs/api/Store.html#subscribelistener

How to trigger off callback after updating state in Redux?

Related

Recent Posts