Question

我最近参加了有关使用redux的react native的课程，现在已经在使用redux的create react应用程序中实现了相同的功能。我有一个由redux处理的auth组件，注册后，您将被重定向（使用react router）到我的主应用程序页面，该页面又分派到我的redux动作fetchUsers（）方法。在fetchUsers（）的结尾，我分派类型SET_USERS，以确保设置了用户，因此在主应用程序页面中状态不再为空。但是，当我尝试使用useSelector选择此状态时，它会以[]的形式返回，这是初始状态。

我的用户操作：

export const fetchUsers = () => {

    return async (dispatch: any, getState: any) => {
        // any async code you want!
        const token = getState().auth.token;
        const userId = getState().auth.userId;

        try {
            const response: any = await axios.all([
                axios.get(`http://127.0.0.1:8000/api/users`),
                axios.get(`http://127.0.0.1:8000/api/users/profiles`)

 **..... (response data is pushed into array loadedUsers here. The response is successful as I have logged out the data) ....**

dispatch({
  type: SET_USERS,
  users: loadedUsers,
  userData: loadedUsers.filter(data => data.id === userId) // equal to the logged in user.
            });
  } catch (err) {
      // send to custom analytics server
      throw err;
  }
};
}

我的用户减速器：

case SET_USERS:
    return { ...state, users: action.users, userData: action.userData }

初始状态：

const initialState = {
    users: [],
    userData: [],
    filteredUsers: USERS,
    bookings: BOOKINGS
}

我的主要组件试图获取状态：


const allUsers = useSelector((state: any) => state.users.users);
    
    
    const loadUsers = useCallback(async () => {
        setError(null);
        setIsRefreshing(true);
        try {
            await dispatch(usersActions.fetchUsers());

        } catch (err) {

            setError(err.message);
        }
        setIsRefreshing(false);
    }, [dispatch, setIsLoading, setError]);


    useEffect(() => {
        // const willFocusSub = props.navigation.addListener('willFocus', loadUsers);
        // clean up
        // return () => {
        //     willFocusSub.remove();
        // }
    }, [loadUsers]);

    useEffect(() => {
        setIsLoading(true);
        loadUsers().then(() => {
            setIsLoading(false);
        });

    }, [dispatch, loadUsers])

如您所见，它正在调用我的fetchUsers（）动作，该动作通过SET_USERS设置状态，但是当我注销它为空时。然而，这在反应本地工作。不确定这是否是因为我正在使用React Router？我正在组合减速器，并在App.tsx中创建它们的商店，然后用来包装包含我所有路线的组件。

有人可以帮助并建议我如何正确检索此状态吗？

谢谢！

状态更新后，React Redux useSelector会变空

0 个答案: