reactjs - react TypeError: Cannot read property 'fulfilled' of undefined on Redux 工具包

Question

我刚刚编译了我的代码，它打印出“TypeError：无法读取未定义的属性‘已完成’”

似乎我必须为已完成添加初始值，但我不知道如何开始。

我应该将我的 .js 转换为 ts 并为下面的代码添加接口吗？

请帮我解决这个问题。

这是我用于 Redux 工具包的 slice.js 文件

import { createSlice, creatAsyncThunk , createAsyncThunk} from '@reduxjs/toolkit';
export const userSlice = createSlice({
    name: 'user',
    initialState: {
        username: '',
        email: '',
        isFetching: false,
        isSuccess: false,
        isError: false,
        errorMessage: '',
    },
    reducers: {
        clearState: (state) => {
            state.isError = false;
            state.isSuccess = false;
            state.isFetching = false;
            return state;
          },
    },
    exrtraReducers: {
        [signupUser.fulfilled]: (state, { payload }) => {
            state.isFetching = false;
            state.isSuccess = true;
            state.email = payload.user.email;
            state.username = payload.user.name;
        },
        [signupUser.pending]: (state) => {
            state.isFetching= true;
        },
        [signupUser.rejected]: (state, { payload }) => {
            state.isFetching = false;
            state.isError = true;
            state.errorMessage = payload.method;
        },
        [loginUser.fulfilled]: (state, { payload }) => {
            state.email = payload.email;
            state.username = payload.name;
            state.isFetching = false;
            state.isSuccess = true;
            return state;
        },
        [loginUser.rejected]: (state, { payload }) => {
            console.log('payload', payload);
            state.isFetching = false;
            state.isError = true;
            state.errorMessage = payload.message;
        },
        [loginUser.pending]: (state) => {
            state.isFetching = true;
        },
    },
});
export const userSelector = (state) => state.user;
export const signupUser = createAsyncThunk(
    'users/signupUser',
    async ({ name, email, password }, thunkAPI ) => {
        try {
            const response = await fetch (
                'https:/...',
                {
                    method: 'POST',
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        name,
                        email,
                        password,
                    }),
                }
            );
            let data = await response.json();
            console.log('data : ', data);
            if (response.status === 200) {
                localStorage.setItem('token', data.token);
                return { ...data, username: name, email: email };
            } else {
                return thunkAPI.rejectWithValue(data);
            }
        } catch (e) {
            console.log('Error', e.response.data);
            return thunkAPI.rejectWithValue(e.response.data);
        }
    }
);
export const loginUser = createAsyncThunk(
    'users/login',
    async ({ email, password }, thunkAPI ) => {
        try {
            const response = await fetch(
                'https://...',
                {
                    method: 'POST',
                    headers: {
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        email,
                        password,
                    }),
                }
            );
            let data = await response.json();
            console.log('response', data);
            if (response.status === 200) {
                localStorage.setItem('token', data.token);
                return data;
            } else {
                return thunkAPI.rejectWithValue(data);
            }
        }  catch (e) {
            console.log('Error', e.response.data);
            thunkAPI.rejectWithValue(e.response.data);
        }
    }
);
export const fetchUserBytoken = createAsyncThunk(
    'users/fetchUserByToken',
    async ({ token }, thunkAPI) => {
      try {
        const response = await fetch(
          'https://...',
          {
            method: 'GET',
            headers: {
              Accept: 'application/json',
              Authorization: token,
              'Content-Type': 'application/json',
            },
          }
        );
        let data = await response.json();
        console.log('data', data, response.status);
        if (response.status === 200) {
          return { ...data };
        } else {
          return thunkAPI.rejectWithValue(data);
        }
      } catch (e) {
        console.log('Error', e.response.data);
        return thunkAPI.rejectWithValue(e.response.data);
      }
    }
  );

标签： reactjstypescriptredux-toolkit

Answer 1

你的功能都是正确的。唯一的问题是顺序。signupUser在定义之前，您不能使用变量等。您需要重新排列文件，以便 thunk 操作创建者位于createSlice.

像这样：

import { createSlice, createAsyncThunk} from '@reduxjs/toolkit';

export const signupUser = createAsyncThunk( ...

export const loginUser = createAsyncThunk( ...

export const fetchUserBytoken = createAsyncThunk( ...

export const userSlice = createSlice({ ...

export const userSelector = ...