Hoe callback activeren na het bijwerken van de status in Redux?

In React wordt de status niet direct bijgewerkt, dus we kunnen callback gebruiken in setState(state, callback). Maar hoe doe je dat in Redux?

Na het aanroepen van this.props.dispatch(updateState(key, value)), moet ik onmiddellijk iets doen met de bijgewerkte status.

Is er een manier waarop ik kan terugbellen met de laatste status, zoals wat ik doe in React?

Antwoord 1, autoriteit 100%

component moet worden bijgewerkt om nieuwe rekwisieten te ontvangen.

er zijn manieren om uw doel te bereiken:

1. componentDidUpdatecontroleer of de waarde is gewijzigd, doe dan iets..

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

2. redux-promise(middleware verzendt de opgeloste waarde van de belofte)

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

vervolgens in component

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

vervolgens in component

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

Antwoord 2, autoriteit 22%

Met Hooks API:

useEffectmet de prop als invoer.

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

Antwoord 3, autoriteit 12%

Het belangrijkste punt over React is een eenrichtingsgegevensstroom. In uw voorbeeld betekent dit dat het verzenden van een actie en het afhandelen van statuswijzigingen moeten worden ontkoppeld.

Je moet niet denken als “Ik deed A, nu wordt XYen ik handel het af”, maar “Wat moet ik doen wanneer XYwordt”, zonder enige relatie met A. De winkelstatus kan vanuit meerdere bronnen worden bijgewerkt. Naast uw component kan Tijdreizen ook de status wijzigen en wordt deze niet doorgegeven via uw Averzendpunt.

Dat betekent in feite dat u componentWillReceivePropsmoet gebruiken zoals voorgesteld door @Utro

Antwoord 4, autoriteit 5%

Je zou de subscribelistener kunnen gebruiken en deze zal worden aangeroepen wanneer een actie wordt verzonden. In de luisteraar krijg je de nieuwste winkelgegevens.

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

Antwoord 5, autoriteit 2%

Je kunt een thunk gebruiken met een callback

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