Come attivare la richiamata dopo l'aggiornamento dello stato in Redux?

In React, lo stato non viene aggiornato istantaneamente, quindi possiamo usare la richiamata in setState(state, callback) . Ma come farlo in Redux?

Dopo aver chiamato il this.props.dispatch(updateState(key, value)) , devo fare qualcosa con lo stato aggiornato immediatamente.

C'è un modo in cui posso chiamare una richiamata con lo stato più recente come quello che faccio in React?

componente dovrebbe essere aggiornato per ricevere nuovi oggetti di scena.

ci sono modi per raggiungere il tuo obiettivo:

1. componentDidUpdate controlla se il valore è cambiato, quindi fai qualcosa ..

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

2. redux-promise (il middleware invierà il valore risolto della promessa)

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

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

quindi in componente

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

Il punto più importante di React è il flusso di dati unidirezionale. Nel tuo esempio ciò significa che l'invio di un'azione e la gestione del cambiamento di stato devono essere disaccoppiati.

Non dovresti pensare come "l'ho fatto A, ora Xdiventa Ye lo gestisco", ma "cosa faccio quando Xdiventa Y", senza alcuna relazione con A. Lo stato del negozio può essere aggiornato da più fonti, oltre al tuo componente, anche Time Travel può cambiare stato e non sarà passato attraverso il tuo Apunto di spedizione.

Fondamentalmente questo significa che dovresti usare componentWillReceivePropscome è stato proposto da @Utro

Con API Hooks:

useEffect con il puntello come 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>
}

È possibile utilizzare subscribelistener e verrà chiamato quando viene inviata un'azione. All'interno dell'ascoltatore otterrai gli ultimi dati del negozio.

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

È possibile utilizzare un thunk con una richiamata

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

Come soluzione semplice puoi usare: redux-promise

Ma se usi redux-thunk , dovresti fare qc in questo modo:

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