2

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 などのモジュールを見ましたが、それらを使用せずに実行したいと考えています。誰かがそれを行う方法を知っている場合は、アドバイスをください。それは非常にありがたいです。

4

1 に答える 1