Есть ли возможность в одном проекте использовать react.js, react-redux-router и hashHistory?

Question

[zalibertywb]

Здравствуйте, читатели моего вопроса. Я буду, если вы меня направите в верном направлении.

Необходимо реализовать роутинг на клиентской стороне в react приложении. Просят использвать redux и hash в пути.
Например: localhost:8080/#/about

Я впервый раз работаю с React стеком. И пока не нашёл грамотного туториала, где показывается как использовать всё вместе: react, redux, react-redux-router и hashHistory.

Буду, рад и ответам, что это возможно реализовать и Вам когда-то попадались материалы в интернете на эту тему, если Вам не сложно, напишите какой вопрос вы задавали гуглу, чтобы потом увидеть работающий пример.

Всем спасибо за внимание! Хорошего настроения и продуктивного дня!

Answer 1

[Максим]

Добрый день, ну так и спросить у гугла: react redux react-router
(четвертая ссылка похожа на что-то максимально подходящее вам)

А по факту: лучше спокойно разобраться:

Сначала react, затем асинхронная загрузка чего либо на реакте (без redux, recompose, reselect, immutable, react-router, и прочих библиотек, гы-гы, наболело просто). Все это есть как в видео-уроках, так и в текстовых учебниках. В быстрой и краткой форме - есть официальная документация (хорошая).

Затем следующий шаг: добавление redux и асинхронная загрузка (да-да, тех же самых данных) - но уже через redux.

Затем добавляется react-router.

И в таком случае, даже если вы не успеете сделать что-то сейчас сразу быстро (подозреваю, что либо тестовое задание, либо дружеская "халтурка" в помощь), то вы сможете в будущем без проблем все это реализовать.

Если нужно быстрее - либо статья выше, либо с ментором.

P.S. вредный совет - ищите react redux react-router boilerplate - репозитории с шаблоном для новых проектов. Зачастую там все уже есть и настроено. Вредный, потому что будет тяжело вносить изменения в сборку, если нет понимания что откуда и куда. А так как авторы популярных бойлерплейтов уже столько накрутили, то там частенько сложно разобраться.

Comments

[zalibertywb]

Ксожалению в этой статье используется вариант, аналогичный решению, которое у меня сейчас в проекте, вариант использования hashHistory не освещён. Но всё равно, Максим, спасибо Вам за то, что потратили своё время.

Удачи и хорошего дня!

[Максим]

zalibertywb, чтобы хистори хэш использовать (в третьем роутере) достаточно поменять одну опцию. поэтому попробуйте такой же запрос, но только укажите react router 3, и если там будет не с хэш хистори - вы это легко исправите.

Answer 2

[zalibertywb]

У меня реализовано приложение с redux и redux-router и redux-thunk, собираю всё это дело web-pack-ом. Но после общения с аналитиком понимаю, что мой вариант с

import { browserHistory } from 'react-router'

не подходит, и требуется использовать hash, я не смог найти, как использовать hashHistory вместе с redux.

Спасибо большое за статью! Сейчас прочитаю и постараюсь разобраться.