Как передать изменённые данные в хранилище redux другой компоненте если используется routing?

Question

[Дмитрий]

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

Вот сам reducer

и action

Главная

Так вот. когда пользователь отправляет написанные данные(авторизация), я отправляю их на сервер и мне приходит список его прежних сохранённых работ, и этот список мне нужно передать другой компоненте и перейти на его страницу(сразу после клика отправить), но проблема в том что хранилище после перехода вновь становится прежним.
нашёл что-то похожее на решение - это библиотека redux-router, но как только я её подключаю я получаю(неизвестная функция func), библиотека react-router, где раньше можно было взять syncHistoryWithStore и hashHistory вообще устарели и с ними пишет(такое-то не было экспортировано из react-router, хотя данные методы итак не подходят), нашёл
1 решение - это окутать кнопку тегом , но тогда по нажатию кнопку не работает ajax, т.е. просто сразу кидает на страницу.

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

Answer 1

[Антон Спирин]

1. Для инициации перехода на новый роут без перезагрузки страницы, следует вызывать:
this.props.history.push('/user');
2. И справьте первый route на:
<Route exact path="/" component={Form} />
Если используете свойство render(в вашем случае в этом нет смысла), то передавайте аргументом свойства роутера:

<Route exact path="/" render={routeProps => <Form {...rotueProps} />} />

3. Никакой redux-router вам не нужен.
4. Не ленитесь изучать возможности библиотек с которыми работаете. Нативные ссылки не имеют никакого отношения к роутеру вашего приложения. Советую изучить исходный код всех компонентов библиотеки react-router-dom. Так у вас хоть будет понимание того как он работает.
5. Вы закомментили вызов const state = createStore();. Верните обратно.
6. Уберите из проекта JQuery. Для AJAX запросов используйте axios/superagent/fetch.
7. Запросы к API по-хорошему выполнять в redux middleware. Советую использовать redux-thunk

Comments

[r_bbg]

Да и вообще в целом код похож на помойку, и вызывает кучу вопросов, в частности читал ли автор доку? Стоило бы сначала разобраться что такое роутинг, и как он работает, тогда бы не возникало подобных вопросов. Зачем тянуть jQuery в React остается большой загадкой. Следующий его вопрос будет где взять this.props.history, потому что он нагородил костылей в роутере в виде render'а + оборачивает компонент в connect

[Антон Спирин]

r_bbg, да. Тут чем дольше смотришь, тем больше вопросов)