質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

488閲覧

React-routerで常に表示するコンポーネントとReact-reduxを接続したい。

croe

総合スコア8

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/07/27 06:28

前提・実現したいこと

Reactでウェブアプリケーションを作成中なのですが、React-router上で常に表示しておきたいコンポーネントとReact-reduxとの接続をどうすればいいのか不明で困っています。
ソースコードのStatusBarにstoreで管理しているstatusをpropsとして渡したいのですが方法がわかりません。。
storeをsubscribeするなど試して見たのですが、そもそもここにStatusコンポーネントを置いていいのか、良い書き方があるのかご教授いただけますと幸いです。

該当のソースコード

javascript

1const StatusBar = styled(StatusBarContainer)``; 2 3const history = createBrowserHistory(); 4 5const store = createStore( 6 combineReducers({ 7 status: statusReducer 8 }), 9 composeWithDevTools(applyMiddleware(routerMiddleware(history))) 10); 11 12let status = store.getState().status; 13status = store.subscribe(() => { 14 return store.getState().status 15}); 16 17export default () => ( 18 <Provider store={store}> 19 <ConnectedRouter history={history}> 20 <Route 21 render={ ({location}) => ( 22 <TransitionGroup component="main" className="main"> 23 <StatusBar 24 status={status} 25 /> 26 <AnimatedSwitch 27 key={location.key} 28 location={location} 29 > 30 <Route exact 31 path="/" 32 render={props => ( 33 <Login {...props} /> 34 )} 35 /> 36 </AnimatedSwitch> 37 </TransitionGroup> 38 )} 39 /> 40 </ConnectedRouter> 41 </Provider> 42) 43

試したこと

store.getState().statusとしてstateは持ってこれるのですが、stateの変更検知が行われないために、store.subscribe(()=> {return store.getState().status});として見たんですが、アンチパターンのようにも思えます。

補足情報(FW/ツールのバージョンなど)

package.json

1"dependencies": { 2 "babel-polyfill": "^6.26.0", 3 "classnames": "^2.2.5", 4 "history": "^4.7.2", 5 "node-sass-chokidar": "0.0.3", 6 "normalize.css": "^8.0.0", 7 "react": "^16.3.1", 8 "react-app-rewired": "^1.5.2", 9 "react-dom": "^16.3.1", 10 "react-facebook": "^5.0.3", 11 "react-modal": "^3.4.5", 12 "react-qr-reader": "^2.1.0", 13 "react-redux": "^5.0.7", 14 "react-router-dom": "^4.1.1", 15 "react-router-redux": "^5.0.0-alpha.9", 16 "react-scripts": "1.1.0", 17 "react-transition-group": "^1.2.0", 18 "recompose": "^0.27.1", 19 "redux": "^4.0.0", 20 "redux-devtools-extension": "^2.13.5", 21 "redux-thunk": "^2.3.0", 22 "styled-components": "^3.3.3" 23 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問