我尝试使用Redux Toolkit和TypeScript实现身份验证。首先,我使用createAsyncThunk创建了signUp,如下所示。
const signUp = createAsyncThunk<
string | null,
{
name: string;
email: string;
password: string;
avatar: string;
}
>(
"user/signup",
async ({ name, email, password, avatar }, { rejectWithValue }) => {
try {
const config = {
headers: {
"Content-Type": "application/json",
},
};
await axios.post(
`${backendURL}/api/user/register`,
{ name, email, password, avatar },
config
);
return null;
} catch (error: any) {
if (error.response && error.response.data.message) {
return rejectWithValue(error.response.data.message);
} else {
return rejectWithValue(error.message);
}
}
}
);
const signIn = createAsyncThunk<void, { email: string; password: string }, {}>(
"user/signin",
async ({ email, password }, { rejectWithValue }) => {
try {
const config = {
headers: {
"Content-Type": "application/json",
},
};
const { data } = await axios.post(
`${backendURL}/api/user/signin`,
{ email, password },
config
);
localStorage.setItem("userToken", data.userToken);
return data;
} catch (error: any) {
if (error.response && error.response.data.message) {
return rejectWithValue(error.response.data.message);
} else {
return rejectWithValue(error.message);
}
}
}
);
然后是减速器
const initialState: {
userToken: string | null;
loading: boolean;
userInfo: { userId: string; email: string } | null;
error: string | null;
success: boolean;
} = {
userToken,
loading: false,
userInfo: null,
error: null,
success: false,
};
const authSlice = createSlice({
name: "authen",
initialState,
reducers: {
logout: (state) => {
localStorage.removeItem("userToken");
state.loading = false;
state.userInfo = null;
state.userToken = null;
state.error = null;
},
setCredentials: (state, { payload }) => {
state.userInfo = payload;
},
},
extraReducers: (builder) => {
builder
.addCase(signUp.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(signUp.fulfilled, (state) => {
state.loading = false;
state.success = true;
})
.addCase(signUp.rejected, (state, action) => {
state.loading = false;
state.error = action.payload;
})
.addCase(signIn.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(signIn.rejected, (state, { payload }) => {
state.loading = false;
state.error = payload;
})
.addCase(signIn.fulfilled, (state, { payload }) => {
state.loading = false;
state.userInfo = payload;
state.userToken = payload.userToken;
});
},
});
因为我没有指定任何类型的行动,所以一个错误消息显示,当我试图分配行动。有效载荷到状态。用户信息,但我不知道如何做到这一点。请帮助我。
我到处找了,但没有找到答案
1条答案
按热度按时间yhuiod9q1#
您不需要提供该类型-它将从您传入的
createAsyncThunk
示例中推断出来-在signUp
到string | null
的情况下。也许你没有为
signIn
输入正确的内容?