javascript - react - ¿Cómo activar la devolución de llamada después de actualizar el estado en Redux?

redux saga

Question

En React, el estado no se actualiza instantáneamente, por lo que podemos usar la devolución de llamada en setState(state, callback) . ¿Pero cómo hacerlo en Redux?

Después de llamar a this.props.dispatch(updateState(key, value)) , necesito hacer algo con el estado actualizado de inmediato.

¿Hay alguna forma de llamar a una devolución de llamada con el último estado como lo que hago en React?

Answer 1

Como una solución simple que puede usar: redux-promise

Pero si usa redux-thunk , debe hacer algo como esto:

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

Answer 2

Con API de ganchos:

useEffect con el accesorio como entrada.

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

Answer 3

El punto más importante sobre React es el flujo de datos unidireccional. En su ejemplo, eso significa que el despacho de una acción y el manejo del cambio de estado deben estar desacoplados.

No debe pensar como "Hice A , ahora X convierte en Y y lo manejo", sino "¿Qué hago cuando X convierte en Y ", sin ninguna relación con A ? El estado de la tienda se puede actualizar desde varias fuentes, además de su componente, el Viaje en el tiempo también puede cambiar de estado y no se pasará por su punto de envío A

Básicamente, eso significa que debe usar componentWillReceiveProps como lo propuso @Utro

Answer 4

Puede usar el escucha de subscribe y se le llamará cuando se envíe una acción. Dentro del oyente obtendrá los últimos datos de la tienda.

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

Answer 5

Puedes usar un thunk con una devolución de llamada

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

Answer 6

componente debe actualizarse para recibir nuevos accesorios.

Hay maneras de lograr su objetivo:

1. componentDidUpdate verifica si el valor cambia, luego haz algo.

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

2. redux-promise (middleware enviará el valor resuelto de la promesa)

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

luego en 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()
}

luego en componente

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