React Redux 存储更新不会触发组件重新渲染

Question

我是 Redux 的新手，在商店更改后重新渲染时遇到问题。我在 SO 上发现了很多类似的问题，但仍然无法解决我的问题。

我有一个包含多个任务的月度任务（事件）日历。 Calendar 是主要组件，在更深层次上还有多个 TaskItem 组件。在第一次渲染时，日历和任务被渲染得很好（在这种情况下没有员工姓名）。在Calendar 组件中，我使用 useEffect 挂钩触发加载员工。我可以在控制台上看到网络请求。除此之外，控制台会登录操作，并且在 reducer 中还会显示员工列表。 Redux devtool 还显示加载的员工。 TaskItem 上的 mapStateToProps 仍然显示完全为空的状态。

我做错了什么？

这是我的相关代码：

日历：

const Calendar = ({startDay, tasks, loadEmployeesAction}) => {

        useEffect(()=>{
            loadEmployeesAction();
        },[]);

        ...
}

export default connect(null, {loadEmployeesAction})(Calendar);

任务项：

const TaskItem = ({task, onTextEdit, onTaskView, saveTask, employees }) => {

    ...
}

const mapStateToProps = (state) => {
    console.log('Actual state is: ', state);
    return {
        employees: state.employees
    }
}

export default connect(mapStateToProps)(TaskItem);

减速机：

export const employeeReducer = (state = [], action) => {
    switch (action.type) {
        case actionType.EMPLOYEES_LOADED:
            console.log('Reducer - Employees loaded:', action );
            return action.payload.employees;
        default :
            return state;
    }
}

动作：

const employeesLoaded = (employees) => {
    return {type: actionType.EMPLOYEES_LOADED, payload: {
            employees
        }
    }
}

export const loadEmployeesAction = () => {
    return (dispatch) => {
        return employeeApi.getAllEmployees().then(emps => {
            console.log('Action - Employees loaded: ', emps);
            dispatch(employeesLoaded(emps));
        })

    }
}

根减速器：

export const rootReduxReducer = combineReducers({
    employees: employeeReducer
});

Answer 1

我发现了错误。这是一个非常笨拙的错误。

我发布的所有代码都很好，但是我将商店创建放在一个组件中，该组件被一次又一次地重新渲染，因此我的商店被一次又一次地重新创建。

Answer 2

reducer 代码似乎不像 redux 模式。所以通常状态对象不会被直接替换为不同的对象。取而代之的是，只有需要更改的状态部分仅使用一些非变异操作，例如扩展运算符。

所以我认为减速器代码应该像这样改变

export const employeeReducer = (state = [], action) => {
switch (action.type) {
    case actionType.EMPLOYEES_LOADED:
        return {...state,employees:action.payload.employees}
    default :
        return state;
}
}

如果来自 API 的响应是在表单中

[{"employee_name":"name","employee_age":24},.....]