如何在另一个动作中调用动作

Question

我正在构建React应用程序：车队汽车经理。所以我有一个用户切片，看起来像这样：

import { createSlice } from '@reduxjs/toolkit'
import { API_URL } from "../API/api";
import axios from 'axios';
import authHeader from "../API/authHeader";

// Slice
//initials here
const slice = createSlice({
name: 'user',
initialState: {
user: initialUser,
userData : initialUserData,
token : initialToken,
adminRole : initialAdminRole,
managerRole : initialManagerRole,
userRole : initialUserRole
},
reducers: {
loginSuccess: (state, action) => {
state.user = action.payload;
localStorage.setItem('user', JSON.stringify(action.payload))
},
getUserData: (state, action) =>  {
state.userData = action.payload;
localStorage.setItem('userData', JSON.stringify(action.payload))
},
authToken: (state, action) => {
state.token = action.payload;
},
isAdmin: (state, action) => {
state.adminRole = action.payload;
},
isManager: (state, action) => {
state.managerRole = action.payload;
},
isUser: (state, action) => {
state.userRole = action.payload;
},
logoutSuccess: (state) =>  {
state.user = null;
state.token = null;
localStorage.clear()
},
},
});
export default slice.reducer

// Actions
const { loginSuccess, logoutSuccess, authToken, isAdmin, isManager, isUser, getUserData } = slice.actions

let token;

export const login = ({ username, password }) => async dispatch => {
try {
axios
.post(API_URL + "login", {username, password})
.then(response => {
if(response.status === 200){
token = response.headers.authorization;
localStorage.setItem('token', token);
authHeader();
dispatch(authToken({token}))
dispatch(loginSuccess({username}));
getUsersData();
}
})
} catch (e) {
return console.error(e.message);
}

}
export const logout = () => async dispatch => {
try {
authHeader();
return dispatch(logoutSuccess())
} catch (e) {
return console.error(e.message);
}
}
let nickname;
let userID;
let Admin;
let Manager;
let User;
export const getUsersData = () => async dispatch => {
try {
axios
.get(API_URL + 'user')
.then(res => {
if(res.data != null){
nickname = res.data;
console.log(nickname);
axios
.get(API_URL + 'user/' + nickname)
.then(res => {
if(res.data != null){
userID = res.data.idUsers;
if(res.data.role === 'ADMIN'){
Admin = true;
localStorage.setItem('adminRole', Admin);
dispatch(isAdmin({Admin}))
}
else if(res.data.role === 'MANAGER'){
Manager = true;
localStorage.setItem('managerRole', Manager);
dispatch(isManager({Manager}))
}
else {
User = true;
localStorage.setItem('userRole', User);
dispatch(isUser({User}))
}

axios
.get(API_URL + 'user/' + userID + '/usersdata')
.then(res => {
if (res.data != null){
let data = JSON.stringify(res.data)
dispatch(getUserData({data}))
localStorage.setItem('userData', data)
}
})
}
})
}
})
} catch (e) {
return console.error(e.message);
}
}

我调用表单中的登录操作：

<Formik
initialValues={{ username: '', password: '' }}
onSubmit={(values) => { dispatch(login(values)) }}
>
{({ isSubmitting }) => (
<Form>
<Field type="text" name="username" />
<Field type="password" name="password" />
<button type="submit" disabled={isSubmitting}>Login</button>
</Form>
)}
</Formik>

登录操作运行良好，它正确地分配了用户名和令牌。看起来登录操作跳过了对getUsersData的调用。它没有显示任何错误或任何内容。
问题是：我应该如何以及在哪里调用动作getUsersData，以便它运行代码？

Answer 1

您需要使用dispatch(getUsersData())而不是getUsersData()，它应该可以工作。