React-Router: Навигация по значению, созданному в редукторе redux

Я пытаюсь создать версию React.js https://rarwe-demo.pagefrontapp.com/bands с использованием React-Router и Redux.React-Router: Навигация по значению, созданному в редукторе redux

Я хотел бы подражать поведению другого приложения при создании новой группы. А именно, перейдите к новой группе.

URL-адрес приложения: .../bands/<bandid>/songs. Я сохраняю полосы в массиве, а <bandid> - это индекс в массиве, и я не знаю, что до после.

[ 
    { 
     id: 0, 
     name: 'Pearl Jam', 
     songs: [ 
      ... 
     ] 
    }, 
    { 
     id: 1, 
     name: 'Led Zeppelin', 
     songs: [ 
      ... 
     ] 
    }, 
]

Моя первая мысль была отправкой другого действия. Но, похоже, неправильно иметь действие «changeUrl», основанное на имени группы. Кроме того, как я могу сделать это в правильном порядке, так как операция создания может занять некоторое время?

Также неправильно хранить значение «selectedBand» в Redux, так как я должен обеспечить URL-адрес, и это значение синхронизируется.

Я предполагаю, что существует «стандартный» способ сделать это, но мой google-foo терпит неудачу. Я смог найти множество примеров для запуска действия Redux на основе перехода URL, но не наоборот.

источник

2016-08-09 MattDuFeu

Предположим, что полосы и поле ввода указаны внутри компонента MenuBar. Вы можете написать метод componentWillReceiveProps внутри этого компонента. И когда создается новая группа, убедитесь, что редуктор отправляет ответ на компонент MenuBar.

Теперь в поле componentWillReceiveProps напишите условие, что при создании новой группы это будет выполнено.

browserHistory.push('/bands/<newbandid>/songs')

источник

2016-08-09 15:45:03 Deadfish

Как я могу обеспечить, чтобы редуктор посылал ответ на компонент MenuBar? Это звучит как добавление чего-то к состоянию, которое, я думаю, мне следует избегать. – MattDuFeu

подключить компонент. Он сможет получить доступ к хранилищу. Для получения подробных инструкций прочтите [документацию по сокращению] (http://redux.js.org/docs/basics/UsageWithReact.html). – Deadfish

Кажется, рекомендуемым способом является использование Redux-Thunk https://github.com/reactjs/redux/issues/1543#issuecomment-201364298

Я не пробовал еще, но что-то вроде этого внутри:

dispatch(create_action); 
get_new_id_from_state(); 
browserHistory.push(new_id);

Я буду обновлять это с окончательным кодом, когда я получаю шанс на самом деле сделать это.

источник

2016-08-15 15:09:46 MattDuFeu

React-Router: Навигация по значению, созданному в редукторе redux

ответ

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