如何使用 react-redux connect() 从 class 组件访问 redux-toolkit reducer/action？

Question

我在 store.js 有一个 redux-toolkit 商店。

import { configureStore } from '@reduxjs/toolkit';
import productCurrency from './stateSlices/productCurrency';

const Store = configureStore({
        reducer: {
            productCurrency: productCurrency,
        },
    })
export default Store;

createslice() 函数本身位于不同的文件中，如下所示。

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;

我的问题是我有一个 class 组件 NavSection 需要访问初始状态和 reducer 操作 setproductCurrency() 来更改状态。我正在尝试使用 react-redux connect() 函数来完成它。

const mapStateToProps = (state) => {
  const { productCurrency } = state
  return { productCurrency: productCurrency.value }
}

const mapDispatchToProps = (dispatch) => {
  return {
    setproductCurrency: () => dispatch(setproductCurrency()),
    dispatch,
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(NavSection);

现在，我可以使用 this.props.productCurrency 访问状态。但是，如果我尝试通过使用 this.props.setproductCurrency()...访问 setproductCurrency()... Chrome 控制台会给我一个错误“this.props.setproductCurrency() 不是一个函数”。

有没有办法解决这个问题，还是我想做一些不可能的事情？

更新#1

我想我只是把球移到了正确的方向。我将 onClick 函数更改为箭头函数，如下所示。

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

现在，setproductCurrency() 被认为是一个函数，但是当我单击按钮时它 return 是一个不同的错误...

Objects are not valid as a React child (found: object with keys {type, payload}). If you meant to render a collection of children, use an array instead.

为什么这个函数现在 return 一个对象？它应该更改状态并触发页面的重新呈现，以便 class 组件可以访问新更改的状态。

Answer 1

需要说明的是，RTK 与 React-Redux、connect 或 mapDispatch 无关 :)

当前错误“Objects are not valid as a React child”是因为你的reducer错误。 reducer 的签名是 not (state, newState)。它是 (state, action). So, your line state.value = newStateis reallystate.value = action`，这是将 整个 Redux 操作对象 作为值分配给状态。这在概念上绝对不正确。

相反，您需要 state.value = action.payload。

如何使用 react-redux connect() 从 class 组件访问 redux-toolkit reducer/action？

How to access redux-toolkit reducer/action from a class component using react-redux connect()?

javascript

reactjs

redux

react-redux

redux-toolkit

更新#1