Question

我有两个 createAsyncThunk - signIn 和 signUp 是否可以同时使用一个 fulfilled reducer？原因是 fulfilled reducer 与 signIn and signUp 相同。示例：

extraReducers: (builder) => {
builder.addCase(signInUser.fulfilled, (state, { payload }) => {
  state.isPending = false;
  state.email = payload.username;
  state.username = payload.username;
  state.first_name = payload.first_name;
  state.last_name = payload.last_name;
  state.title = payload.title;
  state.organization = payload.organization;
  state.isNew = payload.isNew;
  state.isPremium = payload.isPremium;
  state.id = payload.id;
  state.error = '';
  state.access_token = payload.access_token;
  localStorage.setItem(REFRESH_TOKEN, payload.refresh_token);
});
}

Answer 1

是的，有用于此目的的工具：watch this

Answer 2

重构后我发现了一个明显的解决方案，您可以将 state 和 payload 传递给另一个函数，它可以像在 state 中一样设置 yourAsyncThunk.fulfilled。示例：

    builder.addCase(signInUser.fulfilled, (state, { payload }) => {
      assignStateWithUser(state, payload);
    });
    builder.addCase(signUpUser.fulfilled, (state, { payload }) => {
      assignStateWithUser(state, payload);
    });
    builder.addCase(loadUser.fulfilled, (state, { payload }) => {
      assignStateWithUser(state, payload);
    });

const assignStateWithUser = (state: initialStateUser, payload: User) => {
  state.email = payload.username;
  state.username = payload.username;
  state.first_name = payload.first_name;
  state.last_name = payload.last_name;
  state.title = payload.title;
  state.organization = payload.organization;

};

状态和有效载荷的类型：
type initialStateUser = RequestPending & { error: string } & User;

export interface User {
  id: number;
  username: string;
  first_name: string;
  last_name: string;
  email: string;
  title: string;
  organization: string;
};

对多个 createAsyncThunk 函数使用一个填充

2 个答案: