Como ativar o callback após atualizar o estado no Redux?

No React, o estado não é atualizado instantaneamente, portanto, podemos usar o retorno de chamada em setState(state, callback). Mas como fazer no Redux?

Depois de chamar o this.props.dispatch(updateState(key, value)), preciso fazer algo com o estado atualizado imediatamente.

Existe alguma maneira de chamar um retorno de chamada com o estado mais recente, como o que faço no React?

componente deve ser atualizado para receber novos adereços.

existem maneiras de atingir seu objetivo:

1. componentDidUpdate verifica se o valor foi alterado, então faça algo ..

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

2. redux-promessa (middleware irá despachar o valor resolvido da promessa)

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

então em componente

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

então em componente

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

O ponto mais importante sobre React é o fluxo de dados unilateral. Em seu exemplo, isso significa que o despacho de uma ação e o tratamento de mudança de estado devem ser separados.

Você não deve pensar como "eu fiz A, agora Xvira Ye eu cuido", mas "o que faço quando Xse torna Y", sem qualquer relação com A. O estado da loja pode ser atualizado a partir de várias fontes, além de seu componente, a viagem no tempo também pode mudar de estado e não será passada por seu Aponto de despacho.

Basicamente, isso significa que você deve usar componentWillReceivePropscomo foi proposto por @Utro

Com API Hooks:

useEffect com o suporte como entrada.

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

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

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

   }, [value])

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

Você pode usar o subscribelistener e ele será chamado quando uma ação for despachada. Dentro do ouvinte, você obterá os dados da loja mais recentes.

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

Você pode usar uma conversão com um retorno de chamada

myThunk = cb => dispatch =>
  myAsyncOp(...)
    .then(res => dispatch(res))
    .then(() => cb()) // Do whatever you want here.
    .catch(err => handleError(err))

Como uma solução simples, você pode usar: redux-promessa

Mas se você estiver usando redux-thunk , você deve fazer o sth assim:

function addCost(data) {
  return dispatch => {
    var promise1 = new Promise(function(resolve, reject) {
      dispatch(something);
     });
    return promise1;
  }
}