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

我有一个项目，其中一半是用类制作的，另一半是用钩子和Redux制作的。 为此，我使用Redux Toolkit中的

configureStore（）

创建了一个存储，并使用

Provider

组件提供了它。以最简单的方式，商店的设置如下：

const userSlice=createSlice({
名称：“用户”，
初始状态：{
用户：{}
},
减速器：{
验证：（状态，操作）=>state.user=action.payload
}
})
常量存储配置存储({
减速器：{
用户：userSlice.reducer
}
})

有两个组件—一个是新组件functional，它使用

useSelector（）

hook；另一个是旧组件，它基于类，但需要使用此sasme存储来分派操作。 为此，我导入了商店和火

store.dispatch（{type:'user/validate'，负载：newUser}）；

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

我从DevTools的Redux插件中跟踪了我的输入，我可以看到状态没有改变，所以我假设我手动调用

dispatch

是错误的

---

我期望发生的是状态更新，这将触发使用

useSelector

的组件的重新呈现。以下方法是一种安全的方法，可以在不拼写类型字符串的情况下分派操作

从减速器中提取动作

const userSlice=createSlice({
名称：“用户”，
初始状态：{
用户：{}
},
减速器：{
验证：（状态，操作）=>state.user=action.payload
}
})
//以下方法是在不拼写类型字符串的情况下分派操作的安全方法

从减速器中提取动作
const userSlice=createSlice({
名称：“用户”，
初始状态：{
用户：{}
},
减速器：{
验证：（状态，操作）=>state.user=action.payload
}
})
//发行
我要说的是，问题是您试图在reducer函数中对state对象进行变异，并返回它

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

看

在任何给定的情况下，Immer期望您要么变异
现有状态，或自己构造一个新状态值并返回
它，但不是两者在同一个功能

解决方案
只是改变状态，不要返回它

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

如果希望基于类的组件订阅redux存储，那么仍然可以使用
react redux
中的高阶组件

例如：

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);

问题
我要说的是，问题是您试图在reducer函数中对state对象进行变异，并返回它

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

看

在任何给定的情况下，Immer期望您要么变异
现有状态，或自己构造一个新状态值并返回
它，但不是两者在同一个功能

解决方案
只是改变状态，不要返回它

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

如果希望基于类的组件订阅redux存储，那么仍然可以使用
react redux
中的高阶组件

例如：

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);

您在redux开发工具中看到该操作被调度了吗？你只是看不到状态更新？您是否从您从
configureStore
创建的同一
store
对象导入和分派操作？该操作是否已分派，您在redux开发工具中看到了它？你只是看不到状态更新？您是否从您从
configureStore
创建的同一
store
对象导入和分派？这是正确的答案，因为OP使用的是redux-toolkit。谢谢，非常优雅且有效的解决方案。这是正确的答案，因为OP使用的是redux-toolkit。谢谢，非常优雅且有效的解决方案。