Comment déclencher un callback après la mise à jour de l'état dans Redux ?

Question

En React, l'état n'est pas mis à jour instantanément, nous pouvons donc utiliser un callback dans la fonction setState(state, callback) . Mais comment le faire dans Redux ?

Après avoir appelé le this.props.dispatch(updateState(key, value)) J'ai besoin de faire quelque chose avec l'état mis à jour immédiatement.

Y a-t-il un moyen d'appeler un callback avec le dernier état comme je le fais dans React ?

Answer 1

doit être mis à jour pour recevoir de nouveaux props.

il existe des moyens d'atteindre votre objectif :

1. composantDidUpdate vérifier si la valeur est modifiée, puis faire quelque chose

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

2. redux-promesse ( l'intergiciel distribuera la valeur résolue de la promesse)

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

puis dans le composant

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

puis dans le composant

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

Answer 2

Avec l'API Hooks :

useEffect avec l'accessoire en entrée.

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

Answer 3

Le point le plus important de React est le flux de données unidirectionnel. Dans votre exemple, cela signifie que l'envoi d'une action et la gestion des changements d'état doivent être découplés.

Tu ne devrais pas penser comme "j'ai fait A Maintenant. X devient Y et je m'en occupe ", mais " Que dois-je faire quand X devient Y ", sans aucune relation avec A . L'état du magasin peut être mis à jour à partir de plusieurs sources, en plus de votre composant, Time Travel peut également changer d'état et cela ne sera pas transmis par votre composant. A point d'expédition.

En gros, cela signifie que vous devez utiliser componentWillReceiveProps comme il a été proposé par @Utro

Answer 4

Vous pourriez utiliser subscribe et il sera appelé lorsqu'une action est distribuée. Dans l'écouteur, vous obtiendrez les dernières données du magasin.

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

Answer 5

Vous pouvez utiliser un thunk avec un callback

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