在 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。您在 reducer 函数中访问“先前”状态。它实际上是当前状态，但 reducer 函数是状态和动作的函数，即 (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 })
    });
};

如果你需要区分loading数据和adding 了解它的处理方式和更新状态，然后我建议使用单独的操作类型，例如 SET_DATA 和 ADD_DATA。

Answer 2

因此，通过研究 Whosebug 并阅读许多 React 文章，我发现无法在回调函数中访问最新的状态值，useEffect 在挂载时仅被调用一次。

尽管如此，如果您使用 class 组件.

，这不是问题

对于功能组件，您需要使用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] })
    });
   }
}

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

Accessing previous state within a useDispatch method

reactjs

react-redux

react-hooks