Вы решили использовать Redux в качестве библиотеки управления состоянием, теперь вы действительно сделали самую сложную часть. решая, какую библиотеку использовать. все остальное очень просто и быстро. следуйте инструкциям, чтобы создать приложение todo с redux всего за 5 минут.

Идея Redux

У вас есть в основном хранилище трех компонентов, редуктор и действия.

Как говорит Redux,

Магазин содержит все [дерево] состояний вашего приложения. Единственный способ изменить состояние внутри него - это отправить над ним действие.

Действия - это полезные данные, которые отправляют данные из вашего приложения в ваш магазин. Они являются единственным источником информации для магазина.

мы определим два действия: createItem и deleteItem.

Редукторы определяют, как состояние приложения изменяется в ответ на действия, отправленные в магазин. Помните, что действия описывают только то, что произошло, но не описывают, как изменяется состояние приложения.

мы создадим один редуктор, как таблицу в sql db. может быть в зависимости от вашего приложения.

Руководство

Шаг 1

Создайте новое приложение для реагирования с помощью CRA (create-react-app).

create-react-app todo-app

Шаг 2

Установить зависимости

npm install lodash @material-ui/core @material-ui/icons react-redux redux redux-logger

Шаг 3

Если вы хотите узнать эффективный способ хранения файлов, используйте файловую структуру уток. Но для простоты мы будем использовать простую файловую структуру.

Создайте новую папку внутри src с именем «modules».

внутри папки создайте три файла: action.js, reducer.js, store.js

действия - это простые объекты с одним обязательным типом свойства . вы отправляете действия из своего компонента для отправки данных в хранилище состояний.

В идеале вы должны создать другой файл для ваших типов действий.

Шаг-4

создайте новый todo.js в новой папке внутри src с именем «pages». это будет содержать наш компонент списка дел. этот пример ориентирован на Redux, поэтому мы не будем пытаться создавать компоненты / контейнеры. у нас будет все наше приложение только в этом файле.

Создайте пользовательский интерфейс с формой и списком для отображения задач.

Шаг-5

Пришло время связать наш компонент todo с хранилищем redux.

Откройте свой App.js и добавьте поставщика redux, чтобы все дети могли получить доступ к магазину.

Внутри вашего todo.js соедините его с магазином, используя компонент connect из react-redux. добавьте их в конец файла в todo.js.

Теперь товары из магазина будут доступны в реквизитах компонента. Также в props будут доступны две другие функции (действия).

Наконец, вызовите createItem и deleteItem внутри handleSubmit и handleDelete соответственно.

Если вам нужен весь код приложения, то он доступен в этом репозитории github.

Заключение

Вот и все! Это сработало для вас? Пожалуйста, оставьте любые вопросы и комментарии ниже!

Спасибо за чтение!

Если вы нашли эту статью полезной, хлопайте в ладоши! 👏👏👏.