CreateSlice 的 extraReducer 操作不更新状态

Question

设置

我正在使用 createSlice 写一个减速器：

export const fetchUserProfile = createAsyncThunk(...)

export const UserProfileSlice = createSlice<UserProfileState | null, SliceCaseReducers<UserProfileState | null>>({
  name: 'UserProfile',
  initialState: null,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchUserProfile.pending, (state, action) => {
      console.log("Fetching user profile...")
    })
    builder.addCase(fetchUserProfile.rejected, (state, action) => {
      // TODO: Handle this properly later.
      console.log('Failed to fetch user profiles: ', action.payload)
    })
    builder.addCase(fetchUserProfile.fulfilled, (state, action) => {
      console.log('State was: ', state)
      state = action.payload
      console.log('State is ', state)
    })
  }
})

export default UserProfileSlice.reducer

我正在使用 combineReducers 将切片的缩减器添加到我的根缩减器，并且我正在这样创建我的商店：

export const store = createStore(rootReducer, applyMiddleware(thunk));

我以这种方式在组件中使用状态：

const user = useAppSelector(state => state.userProfileReducer)

预期行为

调度 fetchUserProfile.fulfilled 操作时，会更新状态并重新呈现组件以反映其数据。

实际行为

传递给 builder.addCase(fetchUserProfile.fulfilled,...) 的闭包是运行（如控制台输出所示），但其结果从未反映在组件所见的状态中。

我是 React Native 和整个 JS 生态系统的新手，所以我有点难以调试它。感谢您的帮助。

Answer 1

这在 Writing Immer Reducers: Mutating and Returning State 中处理。

state = newValue 没有任何作用。它不会修改state中的对象，但丢弃state中的对象并将一些新值放入变量.

状态对象的变化可以从函数外部观察到——仅仅改变变量不能。

解决方案？

改为return newValue。

CreateSlice 的 extraReducer 操作不更新状态

CreateSlice's extraReducer action not updating the state

react-native

react-redux

expo

redux-thunk

redux-toolkit

设置

预期行为

实际行为