Вы решили использовать 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.
Заключение
Вот и все! Это сработало для вас? Пожалуйста, оставьте любые вопросы и комментарии ниже!
Спасибо за чтение!
Если вы нашли эту статью полезной, хлопайте в ладоши! 👏👏👏.