redux 如何在异步调度后更新状态

drkbr07n  于 2023-04-30  发布在  其他
关注(0)|答案(1)|浏览(131)

假设我的redux store使用async thunk从某个url获取数据。了解了这一点,如何在更新/获取存储值之后将本地状态“users”更新为等于存储(usersStore)的值?
“users”等于userSlice的initialState,它只是一个空数组[]。
我想在useEffect中处理这个更新,如下所示,但也许有更好的解决方案?
可能的解决方案:

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

组件:

export const Users = () => {
  const usersStore = useSelector(state => state.users);
  const [users, setUsers]= useState(usersStore); //initially is just []

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

  ...

切片:

const initialState = [];

const getUsersAsync = createAsyncThunk('users/getUsersAsync', async () => {
  const res = await fetch('someUrl');
  const data = res.json();
  
  return data;
});
}

const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers(builder) => {
    builder.addCase(getUsersAsync.fulfilled, (state, { payload: users }) => {
      return users;
    }
 }
});
gkl3eglg

gkl3eglg1#

你可以做你正在做的事情:

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

如果你想存储一个可能与你的redux状态不同步的本地状态,这将是一种方法。

不过

最好还是去掉这个:

const [users, setUsers]= useState(usersStore);

既然你在用这个:

const users = useSelector(state => state.users);

只要参考上面关于用户的所有内容,如果你想更新状态,你可以只调度一个动作来完成。

相关问题