React + Redux, как начать правильно?

Поставил себе задачу сделать что-то на React + Redux.
И вот застрял с этим Redux.
Объясните пожалуйста, как вы начинаете свою работу с этим всем?
Первое, это установление всех библиотек и их настройка (React/Redux/webpack... )
Далее мне хочется писать компоненты, чтобы видеть всю картину, но во всех примерах написания начинается с action, reducer, store и в конце компоненты.
Как с этим работать, чтобы не сойти с ума?
За основу взял этот туториал , возможно есть лучше?
Например, стоит задача написать простую форму ...
Первая проблема, как принять данные? Есть какой-то рабочий пример аякса?
Насколько понимаю, принимаем данные в action... далее передаем на редюсер затем в store?
Например, на onchange селекта мне нужно брать данные с него, что-то считать и выводить в какой-то инпут... какая здесь цепочка действий, и главное в каких файлах?
  • Вопрос задан
  • 5334 просмотра
Решения вопроса 2
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Как с этим работать, чтобы не сойти с ума?

Не торопиться, если хочется вдумчиво разобраться =)

Первая проблема, как принять данные?

Использовать react lifecycle hooks: в момент componentDidMount (или в componentWillMount) вызвать actionCreator (AC = создатель действия) -> в AC вы генерируете событие с типом REQUEST (которое ловит ваш редьюсер), а затем производите "ajax запрос", скажем так. В случае удачного результата - генерируете событие SUCCESS и ваш редьюсер устанавливает данные. Далее, ваш компонент формы, видит, что есть новые "props" (свойства, которые изменились в редьюсере, о которых компонент узнал, так как он приконекчен с помощью функции "connect" из библиотеки react-redux) и запускается перерендер. Вуаля, после такой кучи действий ваша форма "приняла данные".

Конечно, если просто сделать нативный xhr запрос, кода будет гораздо меньше и все в одном файле, но это уже нужно исходить из ваших пожеланий. Если вам нужно, чтобы данные были "прогнаны" через редьюсер и оказались в store, значит "много действий". Если не нужно - просто обычный xhr запрос, либо если угодно $.ajax и установка данных в state компонента.

Например, на onchange селекта мне нужно брать данные с него, что-то считать и выводить в какой-то инпут... какая здесь цепочка действий, и главное в каких файлах?


Если используется redux, то цепочка следующая: на onChange селекта вызывается обработчик, то есть функция в вашем компоненте, которая вызывает AC (создатель действия, который располагается в папке actions). Далее уходит запрос на сервер. Затем с сервера приходит успешный ответ - вы генерируете событие, типа "DATA_RESPONSE_SUCCESS" и ваш редьюсер его "ловит". Итак, вы оказываетесь в третьем файле - в файле с редьюсером. Там вы манипулируете данными, так как вместе с типом события, вы так же должны были передать из action'а и данные, которые пришли с сервера. После того, как вы установите новые данные в редьюсере - начинается магия (которая заключается в том, что ваш компонент слушает изменения в объекте стора, с помощью функции connect). Ваш компонент перерендеривается и в инпуте оказываются нужные данные, так как инпут в качестве value использует, например: this.props.myNewValueFromServerAfterSelectManipulation (имя переменной, конечно, шуточное).

Итого: вы потрогали файл компонента, файл из папки actions и файл из папки reducers.

Супер итого:
1) вам нужно понять, как сделать форму без redux. Как в ней с помощью this.state и методов жизненого цикла устанавливать и изменять данные в зависимости от того, что выбрал/ввел пользователь. Сделать это не сложно, если начать с туториала на официальной странице, либо заглянуть в РУ туториал здесь.

2) вам нужно понять, почему в actions располагаются асинхронные запросы, и как при этом работает redux-thunk (а так же middlewares в общем). Почему в reducers производится только изменение данных. И самое главное, почему компонент при этом перерисовывается. Опять же, ссылки на официальные руководства уже дали. Русский перевод там не закончен, поэтому, хоть и устаревают версии библиотек, этот туториал по редуксу до сих пор актуален.

P.S. в туториалах есть примеры с кодом
Ответ написан
@titronfan
https://rajdee.gitbooks.io/redux-in-russian/content/ - официальная документация на русском языке
https://github.com/reactjs/redux/tree/master/examples - официальные примеры
За пример с ajax из примеров можно взять папку "async". Посмотрите как там работает ajax.
Для того, чтобы слать асинхронные запросы (ajax) сейчас сделаны специальные миддлвэры - к примеру thunk middleware. Ajax запросы там отсылаются через нативную функцию в js-e "fetch".

Также гляньте эти посты: bogdanov-blog.ru/category/javascript/react-javascript
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Довольно годный материал начните с этого...
Ответ написан
Комментировать
KaaPex
@KaaPex
неумеха
Бесплатные курсы от создателя Dan Abramov
https://egghead.io/technologies/react
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы