我有来自服务器的令牌身份验证,所以当我的Redux应用程序最初加载时,我需要向该服务器发出请求,以判断用户是否经过身份验证,如果是,我应该获得令牌.

我发现不建议使用Redux core INIT操作,所以在呈现应用程序之前,我如何调度操作?

推荐答案

Update 2020:

export default () => next => action => {
  const result = next(action);
  const { type, payload } = result;

  if (type.endsWith('Failure')) {
    if (payload.status === 401) {
      removeToken();

      window.location.replace('/login');
    }
  }

  return result;
};

Update 2018:这个答案适用于React Router 3

我用onEnter个props 解决了这个问题.下面是代码的样子:

// this function is called only once, before application initially starts to render react-route and any of its related DOM elements
// it can be used to add init config settings to the application
function onAppInit(dispatch) {
  return (nextState, replace, callback) => {
    dispatch(performTokenRequest())
      .then(() => {
        // callback is like a "next" function, app initialization is stopped until it is called.
        callback();
      });
  };
}

const App = () => (
  <Provider store={store}>
    <IntlProvider locale={language} messages={messages}>
      <div>
        <Router history={history}>
          <Route path="/" component={MainLayout} onEnter={onAppInit(store.dispatch)}>
            <IndexRoute component={HomePage} />
            <Route path="about" component={AboutPage} />
          </Route>
        </Router>
      </div>
    </IntlProvider>
  </Provider>
);

Reactjs相关问答推荐

从app.js导航,这是在BrowserRouter包装之外

NextJS(AppRouter)、Apollo(客户端),在根布局中使用ApolloProvider时出错

为什么我的标签在Redux API中不能正常工作?

如何在NextJS中仅在刷新页面和页面淡出页面过渡时添加全屏加载器

for each 子级加载父路由加载器

Reaction上下文值无法传递给其他组件

无法在REACTION TANSTACK查询中传递参数

React,当我调用handleSubmit()函数时,我正在将application/json和multiform/data中的数据发送到后端,但student_image中没有数据:null

StrictMode+SetInterval=双重渲染(即使使用useEffect清理)

React 错误: 只能用作 元素的子元素,从不直接渲染.请将您的 包裹在

在 golang 服务器中刷新或直接 url 路径时响应 404

Mui DataGrid 在第二页和前一页上显示项目时出现问题

Redux Toolkit 配置,是否适用于全栈应用程序?

如何通过 React JS 中的映射将新元素添加到对象数据数组中

ReactJS:useMemo 钩子修复了我的无限重新渲染问题而不是 useEffect

如何在props 更改时运行自定义挂钩?

如何使用 UseState 正确测试组件

如何在 Reactjs 中判断受保护路由上的用户角色?

无法有条件地更新useEffect中的setState

CORS 政策:无访问控制允许来源-AWS 和 Vercel