在useDispatch方法中访问以前的状态

Question

如何在react的回调函数中访问以前的状态?因为一旦我访问data，它总是返回初始状态版本，因为我只在mount

上使用useEffect

const data = useSelector(({ state }) => state.data);
const dispatch = useDispatch();
useEffect(_ => {
dataService.loadData().then(resp => {
dispatch({ type: 'SET_DATA', payload: resp.data });
});
}, []);
const addData = newData => {
dataService.addData(newData).then(_ => {
// need the up to date state here for data
dispatch({ type: 'SET_DATA', payload: [newData, ...data] })
});
}
return <>
<button onClick={_ => addData({ name: "new name" })}></button>
{data.map(elem => <div>{elem.name}</div>)}
</>

Answer 1

我认为你没有正确考虑Redux。您可以访问"上一页"状态在减速机函数中。它实际上是当前状态，但减速器函数是状态和动作的函数，即(state, action) =>nextState .

reducer函数是访问你想要更新的状态的地方。

的例子:

const initialState = {
... other state properties ...
data: [],
};
const reducer = (state = initialState, action) => {
switch(action.type) {
... other cases ...
case SET_DATA:
return {
...state,
data: [action.payload, ...data],
}
default:
return state;
}
};

addData处理程序然后只在有效负载中调度newData的动作。

const addData = newData => {
dataService.addData(newData)
.then(_ => {
dispatch({ type: 'SET_DATA', payload: newData })
});
};

如果你需要区分和数据和添加关于如何处理和更新状态，那么我建议使用单独的动作类型，例如SET_DATA和ADD_DATA。

Answer 2

因此，通过挖掘stackoverflow并阅读许多react文章，我发现在回调函数中访问状态的最新值是不可能的，因为useEffect只在mount时被调用一次。

但是，如果您使用类组件，这不是问题。.

功能组件，您需要使用dispatch函数，该函数具有访问当前状态的权限。因此，为了正确更新我的数据，我使用了下一个代码:

const addData = newData => {
dispatch(addDataDispatch(newData));
}

在你的减速机中:

export const addDataDispatch = newData => {
return (dispatch, getState) => {
const {state: {data}} = getState();
if (data.includes(newData)) return;
dataService.addData(newData).then(_ => {
dispatch({ type: 'SET_DATA', payload: [newData, ...data] })
});
}
}