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

时间:2021-05-19 15:41:21

标签: reactjs redux react-redux

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

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

我做错了什么?

这是我的相关代码:

日历:

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
});

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

reducer 代码好像不像 redux 模式那样。所以通常状态对象不会直接替换为不同的对象。取而代之的是,状态中需要更改的部分只是一些非变异操作,如扩展运算符。

所以我认为reducer代码应该像

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},.....]