[英]TypeError: Cannot assign to read only property '' of object '#<Object>' Redux Tool Kit Slice for Firebase Storage REACT NATIVE
[英]react TypeError: Cannot read property 'fulfilled' of undefined on Redux tool kit
我剛剛編譯了我的代碼,它打印出“TypeError:無法讀取未定義的屬性‘已完成’”
似乎我必須為已完成添加初始值,但我不知道如何開始。
我應該將 my.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);
}
}
);
你的功能都是正確的。 唯一的問題是順序。 在定義變量之前,您不能使用變量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 = ...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.