Сохранение синхронного редуктора и реактивного маршрутизатора

Я работаю над приложением (0,14) + redux (3.3) + react-redux (4.4) + action-router (2.0) с тремя компонентами: PostsLists, который является списком блог-заголовкам, Post, который показывает сообщение в блоге и Blog который оборачивает эти компоненты:Сохранение синхронного редуктора и реактивного маршрутизатора

   ┌──────────────────────────────────────────────┐ 
      │            │ 
      │ ┌─────────────┐┌──────────────────────────┐ │ 
      │ │    ││       │ │ 
      │ │ Post 1  ││ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ 
      │ │ Post 2  ││  Post title   │ │ 
      │ │ Post 3  ││ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │ │ 
      │ │    ││       │ │ 
      │ │    ││ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ 
      │ │    ││       │ │ 
      │ │    ││ │      │ │ │ 
      │ │    ││  Post contents  │ │ 
      │ │    ││ │      │ │ │ 
      │ │    ││       │ │ 
      │ │    ││ │      │ │ │ 
      │ │    ││ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │ │ 
      │ │ PostsList ││   Post   │ │ 
      │ └─────────────┘└──────────────────────────┘ │ 
      │            │ 
      │      Blog      │ 
      └──────────────────────────────────────────────┘

до сих пор мое перевождь состояние просто массив постов в блоге:

{posts: [{title: 'Post 1', contents: '…'}]}

маршруты

/posts 
/posts/:id

В /posts только PostLists показано, в то время как на /posts/:idPost также показано на рисунке (это будет ребенок Blog). Почтовый список Link s до /posts/:id.

Blog будет получать сообщения в блоге из HTTP api, когда он установлен, поэтому, если вы загружаете, например. /posts/1Post может быть установлен до того, как появится сообщение для показа.

Мой вопрос об управлении текущим активным сообщением. Моя первая мысль - что я до сих пор очень нравится - это иметь current_post поле в состоянии:

{posts: [{title: 'Post 1', contents: '…'}], 
    current_post: {title: 'Post 1', contents: '…'}}

Однако, когда, например, Погрузка /posts/1, кто должен нести ответственность за обновление current_post (таким образом, чтобы при его изменении перезагрузился Post)? Если Post является контейнером, и я использую mapStateToProps, чтобы иметь current_post, будет ли он повторно отображаться при изменении current_post?

Другой альтернативный вариант - проверить props.params.id в Post, а затем найти нужный пост, но это кажется немного грязным. Как люди обычно создают такое приложение?

источник

2016-03-10 beta

Для приложения, как это, я бы структурировать Redux магазин следующим образом:

{posts: [{id: 1, title: 'Post 1', contents: '…'}], 
current_post: {id: 1}}

PostsList компонент будет нести ответственность за сохранение current_post уточненный (то есть, когда пользователь нажимает на одну из записи, действие будет инициировано, что уменьшит id вновь выбранного сообщения в хранилище redux). Компонент Post будет читать id текущего сообщения, извлекать соответствующие данные из массива posts и отображать его. Каждый раз, когда пользователь меняет текущий пост, все компоненты будут повторно отображены, и, таким образом, весь экран будет обновлен.

источник

2016-03-10 18:57:06 Nicole

Спасибо.Но как насчет того, когда приложение начинается с '/ posts/1'? (I.e., когда нет клика.) Я думаю, 'PostsList' должен читать' parameters.id' и устанавливать 'current_post', когда данные получены. – beta

Другой сценарий: есть ссылка на '/ posts/2' из'/posts/1', теперь 'PostsList' вообще не участвует и ничего не замечает, когда место изменилось, поэтому мы не синхронизированы. Я думаю, нужно прослушивать местоположение, а затем обновлять текущую запись в редукторе на основе изменения URL ... – beta

Когда приложение начинается с 'posts/1', тогда' current_post' также должен быть установлен в 1 (По правде говоря, моя версия была немного упрощенной. На самом деле даже «PostsList» должен читать «current_post» и использовать его для выделения выбранного сообщения. Когда у вас есть другие компоненты в вашем приложении (кроме «PostsList»), которые определяют, какая публикация будет отображаться, вам необходимо вызвать действие для обновления «current_post» от них (например, когда пользователь нажимает ссылку). – Nicole

Я предлагаю загружать данные почтового отправления на основе маршрута через props.params, а затем проверять наличие обновлений с помощью componentWillReceiveProps. Это позволит сравнить текущий идентификатор сообщения (на основе URL-адреса) с входящей почтой и решить, нужно ли что-то обновлять.

Положите его в зависимости от того, какой компонент отвечает за отключение действий по извлечению данных.

Вы также можете сохранить эту информацию в своих магазинах, но я не уверен, что вы получите много. Если вы хотите иметь возможность управлять состоянием навигации в своем магазине, я бы рекомендовал https://www.npmjs.com/package/redux-react-router

источник

2016-03-11 05:52:33 Yair

Сохранение синхронного редуктора и реактивного маршрутизатора

ответ

Смежные вопросы