如何手动将操作分派到使用 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()，另一个是旧的组件，它是基于类的，但需要使用此 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))