Jak wyłączyć callback po zaktualizowaniu stanu w Redux?

W Reakcie stan nie jest aktualizowany od razu, więc możemy użyć wywołania zwrotnego w setState(state, callback). Ale jak to zrobić w Redux?

Po wywołaniu this.props.dispatch(updateState(key, value))muszę natychmiast coś zrobić ze zaktualizowanym stanem.

Czy jest jakiś sposób, żebym mógł wywołać oddzwonienie z najnowszym stanem, takim jak to, co robię w React?

komponent powinien zostać zaktualizowany, aby otrzymać nowe rekwizyty.

są sposoby na osiągnięcie celu:

1. componentDidUpdate sprawdź, czy wartość została zmieniona, a następnie zrób coś ..

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

2. obietnica redux (oprogramowanie pośredniczące prześle wartość obietnicy)

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

następnie w komponencie

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

następnie w komponencie

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

Najważniejszą kwestią dotyczącą Reacta jest jednokierunkowy przepływ danych. W twoim przykładzie oznacza to, że wysyłanie akcji i obsługa zmiany stanu powinny być rozdzielone.

Nie powinieneś myśleć w stylu „Zrobiłem A, teraz się Xstaje Yi sobie z tym poradzę”, ale „Co mam zrobić, kiedy Xsię stanie Y”, bez żadnego związku A. Stan sklepu może być aktualizowany z wielu źródeł, oprócz komponentu, Podróże w czasie mogą również zmieniać stan i nie będą przekazywane przez Twój Apunkt wysyłkowy.

Zasadniczo oznacza to, że powinieneś używać tego, componentWillReceivePropsco zostało zaproponowane przez @Utro

Z Hooks API:

useEffect z prop jako danymi wejściowymi.

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

Możesz użyć subscribe listenera, a zostanie on wywołany, gdy zostanie uruchomiona akcja. Wewnątrz odbiornika znajdziesz najnowsze dane sklepu.

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

Możesz użyć thunk z oddzwonieniem

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

Jako proste rozwiązanie możesz użyć: redux-obietnica

Ale jeśli używasz redux-thunk , powinieneś zrobić coś w ten sposób:

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