Wie kann ein Rückruf nach dem Aktualisieren des Status in Redux ausgelöst werden?

In React wird der Status nicht sofort aktualisiert, sodass wir den Rückruf in verwenden können setState(state, callback). Aber wie geht das in Redux?

Nach dem Aufruf von this.props.dispatch(updateState(key, value))muss ich sofort etwas mit dem aktualisierten Status tun.

Gibt es eine Möglichkeit, einen Rückruf mit dem neuesten Status wie in React aufzurufen?

Komponente sollte aktualisiert werden, um neue Requisiten zu erhalten.

Es gibt Möglichkeiten, Ihr Ziel zu erreichen:

1. componentDidUpdate Überprüfen Sie, ob der Wert geändert wurde, und tun Sie dann etwas.

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

2. Redux-Versprechen (Middleware versendet den aufgelösten Wert des Versprechens)

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

dann in Komponente

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

dann in Komponente

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

Der wichtigste Punkt bei React ist der Datenfluss in eine Richtung. In Ihrem Beispiel bedeutet dies, dass das Versenden einer Aktion und die Behandlung von Statusänderungen entkoppelt werden sollten.

Sie sollten nicht denken wie "Ich habe es getan A, jetzt Xwird es Yund ich kümmere mich darum ", sondern "Was mache ich, wenn es Xwird Y", ohne irgendeine Beziehung zu A. Der Speicherstatus kann aus mehreren Quellen aktualisiert werden. Zusätzlich zu Ihrer Komponente kann Time Travel auch den Status ändern und wird nicht über Ihren Status weitergeleitetA Versandpunkt weitergeleitet.

Grundsätzlich bedeutet dies, dass Sie verwenden sollten, componentWillReceivePropswie es von @Utro vorgeschlagen wurde

Mit Hooks API:

useEffect mit der Requisite als Eingabe.

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

Du könntest benutzen subscribe Listener verwenden und er wird aufgerufen, wenn eine Aktion ausgelöst wird. Im Listener erhalten Sie die neuesten Geschäftsdaten.

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

Sie können einen Thunk mit einem Rückruf verwenden

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

Als einfache Lösung können Sie verwenden: Redux-Versprechen

Aber wenn Sie Redux-Thunk verwenden , sollten Sie Folgendes tun:

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