web-dev-qa-db-fra.com

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

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

Après avoir appelé la this.props.dispatch(updateState(key, value)), je dois immédiatement faire quelque chose avec l'état mis à jour.

Existe-t-il un moyen de rappeler un rappel avec le dernier état comme ce que je fais dans React?

javascriptreactjsredux
56
Brick Yang

le composant doit être mis à jour pour recevoir de nouveaux accessoires.

il existe des moyens pour atteindre votre objectif:

1. ComposantDidUpdate vérifier si la valeur a changé, puis faire quelque chose ..

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

2. Redux-promise (le middleware enverra la valeur résolue de la promesse)

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

puis en 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 en composant

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

Le point le plus important concernant React est un flux de données à sens unique. Dans votre exemple, cela signifie que l'envoi d'une action et la gestion du changement d'état doivent être découplés.

Vous ne devriez pas penser comme "j’ai fait A, maintenant X devient Y et je le gère", 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, le voyage dans le temps peut également changer d’état et il ne sera pas transmis par votre point de départ A.

En gros, cela signifie que vous devriez utiliser componentWillReceiveProps tel que proposé par @Utro

8
just-boris

Vous pouvez utiliser subscribe listener et il sera appelé lorsqu’une action est envoyée. À l'intérieur de l'auditeur, vous obtiendrez les dernières données du magasin.

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

4
Pranesh Ravi

Vous pouvez utiliser un thunk avec un rappel

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

Avec les crochets API:

useEffect avec l'accessoire en entrée.

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

En tant que solution simple, vous pouvez utiliser: redux-promise

Mais si vous utilisez redux-thunk , vous devriez faire ça comme ceci:

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