Как отправить реквизиты для суб-маршрутизируемого компонента с помощью React-Router и React-Redux?

Question

Я создаю сайт с React + React-Router и React-redux. Это мой магазин и редуктор:

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.

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-маршрутизатор:

const ConnectedApp = connect((state) => { 
    return { 
     posts: state.posts 
    }; 
})(App); 

сейчас, последний, я дам компонент маршрутизатора вместо ConnectedApp внутри Поставщика и использовать 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) в качестве реквизита, но я не знаю, как его передать. каждый вспомогательный компонент может быть рендерингом, решается React Router, и каждый компонент не имеет никакого сохраненного состояния Redux.

Я видел некоторые модули, такие как React-Router-Redux, Redux-Router, но я хочу сделать это без них. Если кто-то знает, как это сделать, пожалуйста, дайте советы, и мы будем очень благодарны.

Answer 1

Если вы хотите, чтобы некоторые компоненты вашего дерева получали данные состояния Redux, вам необходимо сделать их «компонентами контейнера» с помощью функции connect() библиотеки React-Redux.

Например, вы могли бы написать «PostsMain» контейнер вроде этого:

import { connect } from 'react-redux'; 
import PostsMainComponent from '../components/posts_main_component.jsx'; 

const mapStateToProps = (state) => { 
    return { 
     // the desired props calculated from the store's state, for example: 
     posts: state.posts, 
    }; 
}; 

const PostsMainContainer = connect(
    mapStateToProps, 
)(PostsMainComponent); 

export default PostsMainContainer; 

Затем использовать его в объявлении маршрутов, как это:

<IndexRoute component={PostsMainContainer} /> 

Вы найдете подробную информацию о контейнере компонентов в Redux's doc и этом post Дэн Абрамов.