Как отключить обратный вызов после обновления состояния в Redux?

В React состояние не обновляется мгновенно, поэтому мы можем использовать обратный вызов в setState(state, callback). Но как это сделать в Redux?

После вызова this.props.dispatch(updateState(key, value))мне нужно немедленно что-то сделать с обновленным состоянием.

Есть ли способ вызвать обратный вызов с последним состоянием, как то, что я делаю в React?

компонент должен быть обновлен, чтобы получать новые реквизиты.

есть способы достичь своей цели:

1. componentDidUpdate проверяет, изменилось ли значение, затем что-то делать ..

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

2. redux-обещание (промежуточное программное обеспечение отправляет разрешенное значение обещания)

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

затем в компоненте

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

затем в компоненте

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

Самый важный момент в React - это односторонний поток данных. В вашем примере это означает, что отправка действия и обработка изменения состояния должны быть разделены.

Вы не должны думать, как «Я сделал A, теперь Xстановится, Yи я справляюсь с этим», а «Что мне делать, когда Xстановится Y», без какого-либо отношения к A. Состояние хранилища может быть обновлено из нескольких источников, помимо вашего компонента, Time Travel также может изменять состояние, и оно не будет передано через вашу Aточку отправки.

В основном это означает, что вы должны использовать, componentWillReceivePropsкак это было предложено @Utro

С помощью Hooks API:

useEffect с опорой в качестве входных данных.

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

Вы можете использовать subscribelistener, и он будет вызываться при отправке действия. Внутри слушателя вы получите последние данные магазина.

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

Вы можете использовать преобразователь с обратным вызовом

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

В качестве простого решения вы можете использовать: redux-обещание

Но если вы используете redux-thunk , вы должны сделать что-то вроде этого:

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