授权后反应redux fetch

Question

我需要将一些初始数据从 API 加载到 redux。用户必须获得授权才能访问 API。用户通过一个 oauth 过程进行授权——发送到外部登录并发送到回调 URL，token 保存到 localstorage，授权状态保存在 redux store 中。

当我配置 redux store 时，授权状态为 preloaded state。

当用户第一次加载应用程序时，他们

• 可能已经被授权（有一个有效的保存令牌），或者
• 可能需要授权（没有有效的保存令牌）。

我希望将初始提取代码放在一个地方。我可以根据需要调用“fetchTodos”，但我必须这样做 在 init 和 loginCallback 上 . 我想出的只是制作一个组件来包装应用程序，只是为了加载这些数据，但这似乎有点全局和hacky。

const LoadTodosWrapper = () => {
  const dispatch = useDispatch();
  const authorized = useSelector(getAuthorized());
  useEffect(() => {
    if(authorized) {
      dispatch(fetchTodos());
    }
  }, [authorized]);
  return <App />;
}

有没有更好的模式来获取初始数据，在验证用户被授权之后？

Answer 1

这是我为我的应用遵循的策略，似乎也适合你的情况。

1 - 你应该有一个包装器组件来包装你的应用程序的所有其他内容。它可能是您的 App 组件，它呈现您的所有路线等。

2 - 那么这个组件应该有两个状态来控制这个策略。

一个正在加载。 const [loading, setLoading] = useState(true)

另一个已登录。 const [loggedIn, setLoggedIn] = useState(false)

3 - 那么你要做的是：

在你的componentDidMount（或相应的useEffect版本）中，你应该检查用户是否有令牌，如果没有，将loading设置为false。 如果用户有令牌，则发出验证令牌的请求。 对于成功或失败，设置loggedIn并将loading设置为false。

4 - 在您的渲染中，如果加载是 true，则显示加载页面并且不渲染其他内容。

5 - 如果未加载：

• 如果已登录，则呈现您的路线，
• 如果不是，则呈现登录页面，仅此而已。同时将 url 更改为 /login。