前提・実現したいこと
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 }
あなたの回答
tips
プレビュー