設定
我正在使用以下方式撰寫減速器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,...)運行(由控制臺輸出證明),但其結果從未反映在組件看到的狀態中。
我是本機和整個 JS 生態系統的新手,所以我有點難以除錯這個。謝謝你的幫助。
uj5u.com熱心網友回復:
這在Writing Immer Reducers: Mutating and Returning State 中處理。
state = newValue沒有任何效果。它不會修改 in 中的物件state,而是丟棄 in 中的物件state并將一些新值放入變數中。
可以從函式外部觀察處于狀態的物件的突變- 簡單地改變變數不能。
解決方案?
做return newValue代替。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/398860.html
標籤:反应原生 反应还原 世博会 redux-thunk redux-工具包
