使用immer库的produce函数,确保修改了状态。
示例代码:
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import produce from 'immer';
const initialState = {};
export const fetchUser = createAsyncThunk(
'user/fetch',
async (_, { rejectWithValue }) => {
try {
const response = await fetch('/api/user');
const data = await response.json();
return data;
} catch (error) {
return rejectWithValue(error.message);
}
}
);
const slice = createSlice({
name: 'user',
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchUser.pending, (state) => {
return produce(state, (draftState) => {
draftState.loading = true;
});
})
.addCase(fetchUser.fulfilled, (state, action) => {
return produce(state, (draftState) => {
draftState.loading = false;
draftState.user = action.payload;
});
})
.addCase(fetchUser.rejected, (state) => {
return produce(state, (draftState) => {
draftState.loading = false;
draftState.error = true;
});
});
},
});
export default slice.reducer;