¿Por qué mi suscripción de Redux no está recibiendo datos del store?
Se realiza un envío a la tienda Redux.
.catch((error) => {
console.error("errorX", error.response.data);
dispatch({
type: ReducerType.STORE_ERROR_MESSAGE,
payload: error.response.data,
});
});
Los datos llegan a la tienda:
case ReducerType.STORE_ERROR_MESSAGE:
console.log('type', type)
console.log('payload', payload )
return {
...state,
error: payload,
info: "",
title: "ERROR",
};
Declaraciones de registro en la tienda:
type STORE_ERROR_MESSAGE
payload **** ERROR TESTING ****
La tienda se registra en Redux de la siguiente manera:
export default combineReducers({
messageStore: MessageReducers
})
El componente Message se suscribe a la messageStore:
const mapStateToProps = (state) => ({
messageStore: state.messageStore,
});
export default connect(mapStateToProps, {})(Message);
El messageStore se desestructura y se registra en el componente Message de la siguiente manera:
const Message = ({error, info, title}) => {
const [message, setMessage] = useState(error || info);
console.log('message', message)
console.log('error', error)
console.log('info', info)
console.log('title', title)
return (...)
}
Sin embargo, no muestra los datos que llegaron a la tienda:
message undefined
error undefined
info undefined
title undefined
davy.ai
Como experto en TI especializado en reactjs y redux, el fragmento de código proporcionado muestra cómo se envían los datos al almacenamiento de redux y cómo se reciben y registran en el almacenamiento y el componente Message.
Cuando se realiza un envío al almacenamiento de redux, este incluye el tipo y la carga útil de los datos que se están enviando. En el fragmento de código dado, el envío se realiza con el tipo ReducerType.STORE_ERROR_MESSAGE y error.response.data como carga útil.
Cuando los datos llegan al almacenamiento, se procesan en el caso ReducerType.STORE_ERROR_MESSAGE y la carga útil se almacena como error en el estado de messageStore. Además, la información y el título se actualizan en consecuencia.
Para acceder a los datos en el componente Message, se necesita suscribirse al messageStore utilizando la función mapStateToProps, que asigna el estado de messageStore a las props. Sin embargo, en el fragmento de código dado, el componente Message ha desestructurado las props pero ha utilizado las claves incorrectas.
Para solucionar este problema, el componente Message debe desestructurar las props de la siguiente manera:
“`const Message = ({messageStore}) => {
const { error, info, title } = messageStore;
const [message, setMessage] = useState(error || info);
console.log(‘message’, message)
console.log(‘error’, error)
console.log(‘info’, info)
console.log(‘title’, title)
return (…)
}
“`
El fragmento de código anterior desestructura correctamente messageStore de las props y utiliza las claves error, info y title para actualizar el estado y registrarlos.