[解決済み] 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>
);
関連
-
[解決済み] error 'document' is not defined : eslint / React
-
[解決済み] ReactJS giving error Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] Angular 2の*ngForのReactでの同等品
-
[解決済み] reactstrapのドロップダウンで選択されたアイテムを設定する方法は?
-
[解決済み] sh: react-scripts: npm start の実行後にコマンドが見つからない。
-
[解決済み] react.jsでng-ifに相当するものは何ですか?
-
[解決済み] Reduxのアクションをタイムアウトでディスパッチする方法とは?
-
[解決済み] Reduxの非同期フローになぜミドルウェアが必要なのか?
-
[解決済み】axiosのすべてのリクエストにAuthorizationヘッダーを添付する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Apolloクライアントでログアウトした後、ストアをリセットする
-
[解決済み] useStateプロパティのフックにmap関数を使用する方法
-
[解決済み] jest: テストスイートの実行に失敗しました。予期しないトークンのインポート
-
[解決済み] リアクトです。<tr>は<td>の子として表示できません。コメント > td > tr を参照してください。
-
[解決済み] React JS Jestで「SyntaxError: 予期しないトークン"
-
[解決済み] ReactJs "インバリアント違反..." リアクトの古典的な問題
-
[解決済み] validateDOMNesting警告React
-
[解決済み] は、gatsby-imageで動作する良いreactのカルーセルコンポーネントはありますか?[って聞かれます。]
-
[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。
-
[解決済み] React JSXのforEach()でHTMLが出力されない