Как с этим работать, чтобы не сойти с ума?
Не торопиться, если хочется вдумчиво разобраться =)
Первая проблема, как принять данные?
Использовать 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. в туториалах есть примеры с кодом
Простой
