Tengo una tienda de redux-toolkit en store.js.

 import { configureStore } from '@reduxjs/toolkit'; import productCurrency from './stateSlices/productCurrency'; const Store = configureStore({ reducer: { productCurrency: productCurrency, }, }) export default Store;

La función Createslice() en sí está en un archivo diferente y se ve así a continuación.

 import { createSlice } from '@reduxjs/toolkit' const initialState = { value: '$', } export const productCurrency = createSlice({ name: 'productCurrency', initialState, reducers: { setproductCurrency(state, newState) { state.value = newState }, }, }) export const { setproductCurrency } = productCurrency.actions; export default productCurrency.reducer;

Mi problema es que tengo un componente de clase NavSection que necesita acceder al estado inicial y la acción reductora setproductCurrency() para cambiar el estado. Estoy tratando de usar la función react-redux connect() para lograr eso.

 const mapStateToProps = (state) => { const { productCurrency } = state return { productCurrency: productCurrency.value } } const mapDispatchToProps = (dispatch) => { return { setproductCurrency: () => dispatch(setproductCurrency()), dispatch, } } export default connect(mapStateToProps, mapDispatchToProps)(NavSection);

Ahora, puedo acceder al estado usando this.props.productCurrency. Sin embargo, si trato de acceder a setproductCurrency() usando this.props.setproductCurrency()... La consola de Chrome me da un error de que "this.props.setproductCurrency() no es una función".

¿Hay alguna forma de arreglar esto, o estoy tratando de hacer algo imposible?

ACTUALIZACIÓN #1

Creo que acabo de mover la pelota en la dirección correcta. Cambié la función onClick para que sea una función de flecha como se muestra a continuación.

 onClick={() => this.props.setproductCurrency('A$')}

Ahora, setproductCurrency() se considera una función, pero devuelve un error diferente cuando hago clic en el botón...

Los objetos no son válidos como hijos de React (encontrado: objeto con claves {tipo, carga útil}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.

¿Por qué esta función ahora devolvería un objeto? Se supone que debe cambiar el estado y desencadenar una nueva representación de la página para que el componente de la clase pueda acceder al estado recién modificado.