В первом блоге мы работали над настройкой структуры проекта и создавали уровень представления, теперь пришло время погрузиться в остальную часть приложения и заставить ее работать.
Прежде чем мы приступим к написанию кода, давайте установим некоторые пакеты, которые нам понадобятся в этой части руководства.
Выполните следующие команды в своем терминале
$ npm install --save redux react-redux redux-thunk axios $ npm install --save-dev moxios redux-mock-store
Во-первых, мы устанавливаем redux для основных redux функций и redux-thunk для выполнения асинхронных вызовов API.
Действия
Действия по определению - это полезные данные, которые отправляют данные из вашего приложения в магазин. В компоненте пользователь нажимает кнопку отправки, это вызывает действие отправки для обработки данных и, в свою очередь, передает обработанные данные соответствующему редуктору, который, наконец, сохранит данные в хранилище.
Следуя прецеденту, установленному в первом блоге, мы сначала напишем тесты, а затем реализуем функцию, чтобы тесты прошли, так что давайте перейдем к делу.
src/actions/TodoActions.test.js
Что ж, тестирование действия несложно, если оно принимает какую-либо полезную нагрузку, оно должно возвращать тип и полезную нагрузку, которые можно легко протестировать.
src/actions/TodoActions.js
Выполнение тестов на этом этапе должно вернуть PASS.
Теперь, когда у нас есть действия, давайте сделаем редукторы, как раньше, и начнем с тестов. Вставьте этот код в src/reducers/todoReducers.test.js.
Реализовать и протестировать редукторы очень просто, поскольку они являются чистыми функциями, создают src/reducers/todoReducers.js и вставляют в него весь следующий код.
В приложениях часто используется более одного редуктора, что приводит к необходимости их объединения, для этого обычно используется index.js файл, который объединяет все редукторы, прежде чем они смогут повлиять на хранилище.
Теперь последняя недостающая часть работающего приложения redux - это магазин, создайте следующий файл src/store/store.js.
Теперь у нас есть все части для приложения React redux, все, что нам нужно, это связать их. В src/index.js обновлять, чтобы было так.
Что ж, теперь давайте обновим презентацию, чтобы использовать добавленную нами часть redux. Итак, в качестве напоминания давайте еще раз рассмотрим приложение redux. Компонент вызовет действие, действие через промежуточное ПО (в данном случае преобразователь) вызовет внешний API, который вернет данные и передаст их соответствующим редукторам. Соответствующие редукторы обновят соответствующие части магазина.
Сначала обновляем src/components/app/AddTodo.js
и в src/components/app/AddTodo.test.js обновите этот import AddTodo from ‘./AddTodo’; до import { AddTodo } from ‘./AddTodo’;. Это сделано для того, чтобы не настраивать магазин перед тестированием AddTodo компонента. Теперь обновляем файл src/components/app/TodoApp.js.
и в обновлении src/components/app/TodoItem.js читать из магазина, как показано ниже.
Ну, это было достаточно давно, я остановлюсь здесь, и в следующий раз мы будем работать над добавлением нескольких функций, тестового сервера и хостинга.
