1. ホーム
  2. reactjs

[解決済み] React/Redux - アプリのロード/イニット時にアクションをディスパッチする

2023-01-21 17:17:45

質問

Reduxアプリの初期ロード時に、このサーバーにリクエストして、ユーザーが認証されているかどうかをチェックし、認証されていればトークンを取得する必要があります。

ReduxコアのINITアクションを使用することは推奨されないことがわかりましたので、アプリがレンダリングされる前にアクションをディスパッチするにはどうすればよいでしょうか。

どのように解決するのですか?

2020年のアップデート : 他のソリューションと並行して、私はReduxミドルウェアを使用して、ログイン試行が失敗していないか各リクエストをチェックしています。

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;
};

2018年更新 : この回答は Reactルータ3

react-routerを使って解決しました。 オンエンター というプロップスを使って解決しました。コードはこのような感じです。

// 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>
);