我如何在 redux 工具包中设置切片内联函数

Question

我有这个功能

    export const authSlice = createSlice({
  name: "auth",
  initialState: {
    credentials: {},
    isLoading: false,
  },
  reducers: {
    isLoading: (state) => {
      state.isLoading = !state.isLoading;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(signInByEmail.fulfilled, (state, action) => {
        state.credentials = action.payload;
      })
      .addCase(signInByEmail.rejected, (state, action) => {
        Alert.alert(
          "OOPS!",
          "Wrong Email or Password",
          [{ text: "Try Again" }],
          { cancelable: false }
        );
      })
      .addCase(signUpByEmail.pending, state => state.isLoading = true)
      .addCase(signUpByEmail.fulfilled, (state, action)=> {

      })
  },
});

它给我一个错误 state.isLoading = true

但是如果我这样做的话

    export const authSlice = createSlice({
  name: "auth",
  initialState: {
    credentials: {},
    isLoading: false,
  },
  reducers: {
    isLoading: (state) => {
      state.isLoading = !state.isLoading;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(signInByEmail.fulfilled, (state, action) => {
        state.credentials = action.payload;
      })
      .addCase(signInByEmail.rejected, (state, action) => {
        Alert.alert(
          "OOPS!",
          "Wrong Email or Password",
          [{ text: "Try Again" }],
          { cancelable: false }
        );
      })
      .addCase(signUpByEmail.pending, (state, action) => {
          state.isLoading = true
      })
      .addCase(signUpByEmail.fulfilled, (state, action)=> {

      })
  },
});

在我进入另一行后，我没有收到任何错误。我错过了什么。

这是我得到的错误，以防万一。

没有与此调用匹配的重载。重载 1 of 2, '(actionCreator: AsyncThunkPendingActionCreator<{ email: string; password: string; }>, reducer: CaseReducer<{ credentials: {}; isLoading: boolean; }, PayloadAction>): ActionReducerMapBuilder<...>', 给出了以下错误。类型 'boolean' 不可分配给类型 'void | { credentials: {}; isLoading: boolean; }'。重载 2 of 2, '(type: string, reducer: CaseReducer<{ credentials: {}; isLoading: boolean; }, Action>):

Answer 1

该错误与从您的减速器中 returned 的内容有关。在可行的情况下，您没有 returning 任何东西。这是一个改变草稿状态的 void 函数。

.addCase(signUpByEmail.pending, (state, action) => {
     state.isLoading = true
})

还有一种替代语法也是可以接受的return一个新状态作为当前状态的替代，即

.addCase(signUpByEmail.pending, (state, action) => ({...state, isLoading: true}))

但是你return的状态必须是一个完整的状态对象。

Type 'boolean' is not assignable to type 'void | { credentials: {}; isLoading: boolean; }'

错误表明两个有效的 return 类型是第一个示例中的 void 或第二个示例中的完整状态 { credentials: {}; isLoading: boolean; }。

该错误还表明您正在 returning boolean。这是因为没有大括号的箭头函数总是 return something.

这个函数 a 改变对象并且 returns void / undefined:

const a = (num: {n: number}): void => { num.n = 1; }

但是当我们没有花括号 {} 时，我们 return 表达式的结果。我们都改变对象 和 return 1.

const b = (num: {n: number}): number => num.n = 1;

Try it out!

简而言之，大括号是必要的，以防止您在分配 state.isLoading = true 时 return 赋值。没有它们，你 return true 这不是减速器的有效 return 类型。

我如何在 redux 工具包中设置切片内联函数

I how setup a slice inline function in redux toolkit

typescript

redux-toolkit