Redux异步dispatch后，如何更新组件本地state为Store数据？

我的Redux Store通过async thunk从接口获取数据，想在Store的usersStore数据更新完成后，把组件本地state「users」更新为usersStore的值。users的初始值是userSlice的initialState（空数组[]）。我想到用useEffect来处理，但不确定有没有更优方案？

我目前的方案： #

useEffect(
  () => {
    setUsers(usersStore);
  }, [usersStore]
);

组件代码： #

export const Users = () => {
  const usersStore = useSelector(state => state.users);
  const [users, setUsers]= useState(usersStore); // 初始值为空数组[]

  useEffect(
    () => {
      dispatch(getUsersAsync());
    }, []
  );

  // ... 其他逻辑
};

Slice代码： #

const initialState = [];

const getUsersAsync = createAsyncThunk('users/getUsersAsync', async () => {
  const res = await fetch('someUrl');
  const data = await res.json(); // 这里需要加await，res.json()是异步方法
  
  return data;
});

const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers(builder) {
    builder.addCase(getUsersAsync.fulfilled, (state, { payload: users }) => {
      return users;
    }); // 补充分号和闭合括号
  }
});

其实完全没必要在组件里维护一份独立的users本地state，直接使用useSelector获取的usersStore就足够了：

export const Users = () => {
  const users = useSelector(state => state.users); // 直接用store中的数据
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getUsersAsync());
  }, []);

  // 后续直接使用users即可，store更新时组件会自动重渲染拿到最新值
};

原因： #

Redux的核心作用就是集中管理应用状态，useSelector会订阅Redux store的变化——当store中的users数据更新后，组件会自动触发重渲染，useSelector会返回最新的users值。此时再维护一份本地state属于冗余，不仅增加了同步成本，还可能导致数据不一致的问题。

特殊场景下的备选方案 #

如果确实有特殊需求（比如需要在组件内修改这份数据但不想同步回Redux store），你最初的useEffect方案是可行的，但要注意：

• 确保useEffect的依赖数组包含usersStore，保证store数据更新时能同步到本地state
• 注意处理初始值的一致性，避免渲染差异

内容的提问来源于stack exchange，提问作者Notorious Zet