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

Question

我有一个redux-toolkit store在store.js.

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;

我的问题是，我有一个类组件NavSection需要访问初始状态和减速器动作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()不是一个函数"。

是否有办法解决这个问题，或者我正在尝试做一些不可能的事情?

<标题>

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

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

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

对象作为React子对象无效(found: object with key {type, payload})。如果您打算呈现子元素的集合，请使用数组。

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

Answer 1

要清楚，RTK与React-Redux,connect或mapDispatch无关:)

当前的错误是"对象作为React子对象无效"。是因为你的减速器坏了。减速机的签名是而不是(state, newState)。是(state, action). So, your line态。value = newStateis really的状态。value = action '，这是将整个Redux操作对象作为值分配给状态。这在概念上肯定是不正确的。

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