使用带有 Typescript 的 Redux 工具包未更新状态

Question

使用 createAsyncThunk 和 extraReducers，我可以获得数据，但状态没有更新。这是代码

// matchMakingSlice.ts
export const getOpenChallenges = createAsyncThunk(
  "openchallenges/get",
  async () => {
    const response = await fetchWrapper<Lobby>("api/p/openchallenges", "GET");
    return response;
  }
);

export const matchMakingSlice = createSlice({
  name: "matchMaking",
  initialState: lobbyState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(getOpenChallenges.fulfilled, (state, action) => {
  state = action.payload;
    });
  },
});

export default matchMakingSlice.reducer;

在这里我可以看到有效载荷中的数据，但是当我设置状态时，它并没有按照我的预期去做... Reduc Chrome Addon 向我显示了一个空状态。我在组件中尝试使用选择器时得到了相同的结果。

这里有更多信息：

// store.ts
const store = configureStore({
  reducer: {
    matchMaking: mathMakingReducer,
    user: userReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();

export default store;

// component.ts
const Lobby = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getOpenChallenges());
  }, [dispatch]);

  const challenges = useSelector((state: RootState) => {
    return state.matchMaking.openChallenges;
  });

我做错了什么？谢谢！

Answer 1

state = action.payload 在 Immer 动力减速器中永远不是有效操作。 Immer 通过跟踪突变到现有 state 或让您 return 一个新值来工作。 state = 只是将局部 state 变量更改为指向不同的东西，这既不是突变也不是 return。你需要 return action.payload.

有关这方面的更多详细信息，请参阅 the RTK "Writing Reducers with Immer" docs page。

使用带有 Typescript 的 Redux 工具包未更新状态

State not updated using Redux toolkit with Typescript

typescript

reactjs

redux

redux-toolkit