使用带有类型记录的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插件显示了一个空状态。在组件中使用选择器的结果与此相同。

这里有更多的信息：

// 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的突变，或者让您返回一个新值。state =只是将局部变量state更改为指向不同的东西，这既不是突变，也不是返回。你需要return action.payload。

有关此问题的更多细节，请参见RTK“用Immer写减速器”文档页面。