我在将extraReducer添加到我的createSlice时遇到上述错误。
这是本机应用程序
这是我的代码:
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并检查是否成功。工作正常。我必须编写一个reducerloginSucess
来交叉检查API是否正常工作。它确实工作正常
我不明白我要去哪里错了!
需要帮忙!!
这是错误的屏幕截图:
我得到了答案。您在这里检查相同。这是我的愚蠢。我没有正确安排代码。的login
应该已经在上面了loginSlice
。谢谢!!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句