我是 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
});
答案 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},.....]