如何在React+Redux中按部门从API获取并展示用户？

问题描述 #

已基于Axios实现AdminService（包含获取所有部门、按部门名称获取用户的接口），Redux的ActionTypes、Actions、Reducer、Thunk、Store及其他组件运行正常，但在AdminComponent的部门表格中触发获取对应部门用户的逻辑无效果。直接访问API接口（如http://localhost:8082/api/departments/IT）可正常获取用户JSON数据，需求是实现按部门展示用户姓名。

代码问题排查 #

1. Thunk中未调用Action创建函数 #

UsersByDep.Thunk.js里的dispatch(UsersByDepActions.GettingUsersByDepName)未加括号，导致未触发对应的action，无法更新加载状态。

2. Thunk参数处理错误 #

AsyncGetUsersByDepName接收的是部门名称字符串，但代码里错误地用department.department去访问属性，导致API请求路径参数错误。

3. UI组件触发逻辑未执行 #

表格单元格内仅定义了箭头函数但未调用，导致dispatch逻辑从未执行；且未设置交互触发方式（如点击事件）。

4. Reducer错误字段名不匹配 #

InitialState中错误字段为usersErrorMessage，但Reducer错误分支里赋值给了usersErrorMsg，字段名不一致导致错误信息无法正确存储。

修正后的代码 #

1. 修正UsersByDep.Thunk.js #

import UsersByDepService from '../../../Services/Adminservice'
import UsersByDepActions from './UsersByDep.actions'

export const AsyncGetUsersByDepName = (depName) => (dispatch) => {
    dispatch(UsersByDepActions.GettingUsersByDepName()) 
    UsersByDepService.get_users_by_depName(depName) 
        .then(res => {
            dispatch(UsersByDepActions.GetUsersByDepName(res.data))
            console.log('users :', res.data)
        })
        .catch(err => {
            dispatch(UsersByDepActions.GettingUsersByDepNameError(err.message))
        })
}

2. 修正UsersByDep.Reducer.js #

import UsersByDepActionTypes from "./UsersByDep.ActionTypes";
import UsersByDepInitialState from "./UsersByDep.InitialState";

const UsersByDepReducer = (state = UsersByDepInitialState, { type, payload }) => {
    switch (type) {
        case UsersByDepActionTypes.GETTING_USERS_BY_DEPARTMENT:
            return {
                ...state,
                usersIsLoading: true,
            }

        case UsersByDepActionTypes.GET_USERS_BY_DEPARTMENT:
            return {
                ...state,
                usersIsLoading: false,
                users: payload,
                usersErrorMessage: null,
            }
        case UsersByDepActionTypes.GET_USERS_BY_DEPARTMENT_ERROR:
            return {
                ...state,
                usersIsLoading: false,
                usersErrorMessage: payload,
            }

        default:
            return state
    }
};

export default UsersByDepReducer;

3. 修正UI组件逻辑与用户展示 #

先从Redux中获取用户数据，再通过点击事件触发获取逻辑，最后渲染用户列表：

// 从Redux取出用户相关状态
const { users, usersIsLoading, usersErrorMessage } = useSelector(state => state.usersByDep);
const dispatch = useDispatch();

// 表格行部分
<tr key={dep.id}>
    <th scope='col'>{departmentsCount++}</th>
    <th scope='col'>{dep.department}</th>
    <th>
        <Button variant="primary btn-sm" onClick={() => dispatch(AsyncGetUsersByDepName(dep.department))}>
            {usersIsLoading ? '加载中...' : '查看用户'}
        </Button>
        {usersErrorMessage && <div className="text-danger mt-1">{usersErrorMessage}</div>}
    </th>
    <th scope='col'> 
        <Button variant="danger btn-sm" onClick={() => dispatch(AsyncDeleteDepartmet(dep))}>-</Button>
    </th>
</tr>

// 展示当前选中部门的用户列表
{users.length > 0 && (
    <div className="mt-4">
        <h4>当前部门用户</h4>
        <ul>
            {users.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    </div>
)}

内容的提问来源于stack exchange，提问作者Артём Орёл