我正在使用 Redux Toolkit 和下面的 thunk/slice。我认为我可以通过等待 thunk 承诺解决来在本地处理它们,而不是在状态中设置错误,使用此处提供的示例 https://redux-toolkit.js.org/api/createAsyncThunk#examples.
我想我可以避免这样做,也许我应该通过设置一个error
在该州,但我有点想了解我在这方面哪里出了问题。
Argument of type 'AsyncThunkAction<LoginResponse, LoginFormData, {}>' is not assignable to parameter of type 'Action<unknown>'.
Property 'type' is missing in type 'AsyncThunkAction<LoginResponse, LoginFormData, {}>' but required in type 'Action<unknown>'
通过时出现错误resultAction
to match
:
const onSubmit = async (data: LoginFormData) => {
const resultAction = await dispatch(performLocalLogin(data));
if (performLocalLogin.fulfilled.match(resultAction)) {
unwrapResult(resultAction)
} else {
// resultAction.payload is not available either
}
};
thunk:
export const performLocalLogin = createAsyncThunk(
'auth/performLocalLogin',
async (
data: LoginFormData,
{ dispatch, requestId, getState, rejectWithValue, signal, extra }
) => {
try {
const res = await api.auth.login(data);
const { token, rememberMe } = res;
dispatch(fetchUser(token, rememberMe));
return res;
} catch (err) {
const error: AxiosError<ApiErrorResponse> = err;
if (!error || !error.response) {
throw err;
}
return rejectWithValue(error.response.data);
}
}
);
slice:
const authSlice = createSlice({
name: 'auth',
initialState,
reducers: { /* ... */ },
extraReducers: builder => {
builder.addCase(performLocalLogin.pending, (state, action) => startLoading(state));
builder.addCase(performLocalLogin.rejected, (state, action) => {
//...
});
builder.addCase(performLocalLogin.fulfilled, (state, action) => {
if (action.payload) {
state.rememberMe = action.payload.rememberMe;
state.token = action.payload.token;
}
});
}
})
感谢您的任何帮助!