React + React-Router と React-redux で Web サイトを作成しています。これは私のストアとリデューサーです:
const defaultState = {
posts: [{key:0, title: 'Default post', text: 'Every visitor is welcome!'}]
};
const store = createStore(
(state = defaultState, action) => {
switch(action.type) {
default:
return state;
}
}
);
まだアクションがありません。後で追加します。話は戻りますが、これは React App のエントリーポイントである App Component です。
const App = React.createClass({
render() {
return (
<div>
<h1>React Router + Redux Blog</h1>
<ul>
<li><IndexLink to="/">Main</IndexLink></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/posts">Posts</Link></li>
</ul>
{this.props.children}
</div>
);
}
});
この App コンポーネントは、Redux-Router の connect メソッドで接続します。
const ConnectedApp = connect( (state) => {
return {
posts: state.posts
};
})(App);
最後に、Provider 内の ConnectedApp の代わりに Router コンポーネントを提供し、ConnectedApp をインデックス コンポーネントとして使用します。
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={ConnectedApp}>
<IndexRoute component={Main} />
<Route path="about" component={About} />
<Route path="posts" component={Posts} >
<IndexRoute component={PostsMain} posts={[]} />
<Route path="write" component={PostsWrite} />
</Route>
</Route>
</Router>
</Provider>,
document.getElementById('app')
);
さて、これが問題です。Redux Store の状態をサブコンポーネント (PostsMain または PostsWrite) に Props として送信したいのですが、渡す方法がわかりません。レンダリングされる可能性のあるすべてのサブコンポーネントは React Router によって決定され、各コンポーネントには Redux によって保存された状態はありません。
React-Router-Redux、Redux-Router などのモジュールを見ましたが、それらを使用せずに実行したいと考えています。誰かがそれを行う方法を知っている場合は、アドバイスをください。それは非常にありがたいです。