Простая в использовании библиотека управления состоянием React

Каждое приложение должно управлять состоянием. В React мы можем пройти долгий путь, используя крючки, и, в частности, использовать состояние() и передавать реквизит.

Когда все становится сложнее, чем это, мне нравится сразу же переходить к библиотеке государственного управления. Один из моих любимых в последнее время – проще простого .

Он построен поверх Redux и обеспечивает более простой способ взаимодействия с состоянием.

Мне нравится, чтобы мой код был как можно более простым. Просто – это понятно. Простое – это прекрасно.

Сложности следует избегать любой ценой и, по возможности, прятать в библиотеках, которые предоставляют нам простой интерфейс. Так обстоит дело с этой библиотекой, и именно поэтому она мне нравится!

Установите его с помощью:

npm install easy-peasy

Прежде всего нам нужно создать магазин . Хранилище – это место, где мы будем хранить наше состояние и функции, необходимые для его изменения.

Создайте хранилище в файле store.js в корне вашего проекта, с этим содержимым:

Создайте хранилище в файле || store.js ||в корне вашего проекта, с этим содержимым:

import { createStore, action } from 'easy-peasy'

export default createStore({})

Позже мы добавим в этот файл еще кое-что.

Теперь оберните свое приложение React в Поставщик магазина компонент, предоставленный простой в использовании . Это зависит от того, что вы используете. Например, с помощью приложения create-react- добавьте это в свой index.js файл:

//...
import { StoreProvider } from 'easy-peasy'
import store from '../store'

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
)

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

Теперь вы готовы войти в store.js файл и добавьте некоторое состояние и некоторые действия для изменения этого состояния.

Давайте рассмотрим простой пример. Мы можем создать имя состояние, и мы создадим установить имя действие для изменения имени:

import { createStore, action } from 'easy-peasy'

export default createStore({
  name: '',
  setName: action((state, payload) => {
    name = payload
  })
})

Теперь внутри любого компонента вашего приложения вы можете импортировать использовать состояние хранилища и |/Использует для реакций из проще простого :

import { useStoreState, useStoreActions } from 'easy-peasy'

Мы используем используйте Состояние хранилища для доступа к свойствам состояния хранилища:

const name = useStoreState((state) => state.name)

и Использует для реакций для доступа к действиям, которые мы определили:

const setName = useStoreActions((actions) => actions.setName)

Теперь мы можем вызывать это действие всякий раз, когда что-то происходит в нашем приложении, например, если мы нажимаем кнопку:

 {
    setName('newname')
  }}
>
  Set name

Теперь любой другой компонент, который получает доступ к состоянию через используйте Состояние хранилища() , чтобы увидеть обновленное значение.

Это простой пример, но все начинается с этого. Вы можете добавить столько переменных состояния и столько действий, сколько захотите, и я обнаружил, что централизация всего этого в store.js файл делает приложение очень простым в масштабировании.

Оригинал: “https://flaviocopes.com/react-easy-peasy/”