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 al this.props.dispatch(updateState(key, value)), necesito hacer algo con el estado actualizado inmediatamente.
¿Hay alguna forma de llamar a una devolución de llamada con el estado más reciente como lo que hago en React?
dispatch()es una actividad sincrónica. El estado actualizado debería estar disponible en la siguiente línea.
thunk.
Respuestas:
El componente debe actualizarse para recibir nuevos accesorios.
hay formas de lograr su objetivo:
1. componentDidUpdate comprueba si el valor ha cambiado, luego haz algo ..
componentDidUpdate(prevProps){
if(prevProps.value !== this.props.value){ alert(prevProps.value) }
}
2. redux-promise (el 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)
})
redux-thunkejemplo, lo usa dispatchcomo si fuera sincrónico. ¿Es ese el caso?
dispatchno es sincrónico. Sin el Promise.resolve(), this.props.valuetodavía devolvería el valor anterior. Todavía se necesita algún tipo de aplazamiento asíncrono ( setTimeoutpor ejemplo, hacer referencia desde dentro de a también funcionaría).
TypeError: _this.props.dispatch is not a function?
El punto más importante de React es el flujo de datos unidireccional. En su ejemplo, eso significa que el envío de una acción y el manejo de cambios de estado deben estar desacoplados.
No debes pensar como "lo hice A, ahora se Xconvierte Yy lo manejo", sino "qué hago cuando se Xconvierte Y", sin ninguna relación con A. El estado de la tienda se puede actualizar desde varias fuentes, además de su componente, Time Travel también puede cambiar de estado y no pasará por su Apunto de envío.
Básicamente, eso significa que debe usarlo componentWillReceivePropscomo lo propuso @Utro
componentWillReceivePropsestá en desuso? static getDerivedStateFromProps()no parece un reemplazo adecuado ya que no puede llamar a una devolución de llamada, por lo que puedo decir
Con API Hooks:
useEffect con el prop 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>
}
Puede usar el subscribeoyente y se llamará cuando se envíe una acción. Dentro del oyente obtendrá los últimos datos de la tienda.
subscribesolo se activa cuando se envía una acción. No hay forma de subscribeque sepa si su llamada a la API ha devuelto algún dato ... ¡creo! : D
Puedes usar un procesador con devolución de llamada
myThunk = cb => dispatch =>
myAsyncOp(...)
.then(res => dispatch(res))
.then(() => cb()) // Do whatever you want here.
.catch(err => handleError(err))
Como solución simple, 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;
}
}
thunk?