如何手动将操作分派到使用configureStore创建的存储

Question

我有一个项目，其中一半是用类制作的，另一半是用钩子和Redux制作的。为此，我使用Redux Toolkit中的configureStore()创建了一个存储，并使用Provider组件提供了它。以一种非常简单的方式，商店设置如下：

const userSlice = createSlice({
name: 'user',
initialState: {
user: {}
},
reducers: {
validate: (state, action) => state.user = action.payload
}
})
const store configureStore({
reducer: {
user: userSlice.reducer
}
})

有两个组件——一个是使用useSelector()钩子的新组件functional，另一个是基于类的旧组件，但需要使用这个sasme存储来调度操作。为此，我导入商店并启动

store.dispatch({type: 'user/validate', payload: newUser});

来自类组件。我没有收到任何错误，但什么也没发生。

我从DevTools的Redux插件中跟踪了我的输入，我可以看到状态没有改变，所以我认为我手动调用dispatch是错误的。

我期望的是更新状态，这将触发使用useSelector的组件的重新呈现

Answer 1

以下方法是在不拼错类型字符串的情况下调度操作的安全方法。

1. 从减速器中提取动作

const userSlice = createSlice({
name: 'user',
initialState: {
user: {}
},
reducers: {
validate: (state, action) => {
state.user = action.payload
}
}
})
// <------------------
// Action creators are generated for each case reducer function
export const { validate } = userSlice.actions

export const store =  configureStore({
reducer: {
user: userSlice.reducer
}
})

2. 按如下方式调度操作

store.dispatch(validate(newUser))

Answer 2

问题

我要说的问题是，你试图在reducer函数中更改你的状态对象，并返回它。

参见突变和返回状态

在任何给定的情况下，Immer预计您将突变现有状态，或自己构造一个新的状态值并返回它，但和都在同一个函数中

解决方案

只是改变状态，不要返回。

reducers: {
validate: (state, action) => {
state.user = action.payload;
},
}

如果您希望基于类的组件订阅redux存储，那么您仍然可以使用react-redux中的connect Higher Order组件。

示例：

import { connect } from 'react-redux';
import { validate } from '../path/to/userSlice';
class MyComponent extends Component {
...
// In a function you can simply dispatch the validate action
// as it was wrapped in a call to dispatch already and injected
// as a prop.
this.props.validate(somePayloadValue);
...
}
const mapDispatchToProps = {
validate
};
export default connect(null, mapDispatchToProps)(MyComponent);