TypeError: Cannot read property 'pending' of undefined in the redux toolkit while using createAsyncThunk and createSlice (@reduxjs/toolkit": "^1.4.0)

Question

我在将 extraReducer 添加到我的 createSlice.

时出现上述错误

这是一个 react-native 应用程序

这是我的代码：

    export const login = createAsyncThunk(
      'loginAuth/login',
      async ({username, password}) => {
        try {
          const res = await api.post('SomeApi', {
            username,
            password,
          });
         
          return res.data;
        } catch (e) {
          return console.error(e.message);
        }
      },
    );

    const loginSlice = createSlice({
      name: 'loginAuth',
      initialState: {
        loginStatus: false,
        isLoading: false,
        error: '',
      },
      reducers: {
        //Yet to be filled
      },
      extraReducers: {
        [login.pending]: (state) => {
          state.isLoading = true;
        },
        [login.fulfilled]: (state, action) => {
          state.isLoading = false;
        },
        [login.rejected]: (state, action) => {
          state.error = action;
        },
      },
    });

这是我来自另一个文件的调度代码：

    class Login extends Component {
      state = {
        data: {
          username: '',
          password: '',
        },
        textHidden: true,
      };
    
      handelSubmit = (status) => {
        if (status) {
          this.props.login(this.state.data);
        }
      };
    render(){
        return(
    //The UI for Input is here. I confirmed that the dispatch is working fine. I did log the username and password. But I didn't use the createAsyncThunk
    )
    }
    
    const mapDispatchToProps = (dispatch) => ({
      login: (data) => dispatch(login(data)),
    });
    
    export default connect(null, mapDispatchToProps)(Login);

为了确认发送，我确实编写了另一个同名函数 login()，我在其中记录了用户名和密码：

    export const login = ({username, password}) => async (dispatch) => {
      console.log(username,password); // Here the dispatch is working fine
      //  called that API and dispatched to a reducer dispatch(loginSucess(result.data))
        };

有了上面提到的功能，我确实调用了 API 并检查是否成功。它运作良好。我不得不为 loginSucess 编写一个减速器来交叉检查 API 是否正常工作。它确实工作正常

我不明白哪里错了！！

需要帮助！！

这是错误的截图：

Answer 1

你能不能尝试只 return 响应而不是像这样在你的 AsyncThunk 中做 try/catch:

export const login = createAsyncThunk(
  'loginAuth/login',
  async ({username, password}) => {
      const res = await api.post('SomeApi', {
        username,
        password,
      });
      return res.data;
  }
);

Answer 2

我得到了答案。你检查相同的here。这是我的愚蠢。我没有正确安排代码。 login 应该在 loginSlice 之上。谢谢！！

TypeError: Cannot read property 'pending' of undefined in the redux toolkit while using createAsyncThunk and createSlice (@reduxjs/toolkit": "^1.4.0)

TypeError: Cannot read property 'pending' of undefined in the redux toolkit while using createAsyncThunk and createSlice (@reduxjs/toolkit": "^1.4.0)

react-native

redux-thunk

redux-toolkit