Рубрики
Без рубрики

Управление государством с контекстом React + крючки

Менеджмент государства с контекстом React + ManucksState Management с контекстом React + крючки

Автор оригинала: Mohit Prakash.

Есть много способов обработки глобальных государственных управлений, таких как redux, mobx, комбинезон и т. Д. Если вы уже использовали redux, вы помните действие, хранить, редуктор и некоторые функции, такие как Connect (), USESTATETOPOOPS, USEDISHISCATCHTOPROPS могут получить доступ к состоянию.

Но теперь в React 16.8 и выше, вам не нужно использовать третьей сторонней библиотеке Redux. РЕАКТ обеспечивает свои собственные крючки и API, такие как упреждающий текст.

Зачем реагировать контекст?

Представьте, что у вас есть 5 компонентов, и вы хотите поделиться состоянием из одного компонента на другое, но вы можете поделиться государством от родителей к дочерному компоненту, используя реквизиты и ребенка для родителей, используя Ref или Callback. В приведенном выше показателе вы можете поделиться состоянием из компонента 1 к компоненту 4, компонент 2 к компоненту 5 и компонента 3 к компоненту 5 и наоборот. Но если вы хотите поделиться данными из компонента 1 до компонента 2 или компонента 3, вы не можете сделать.

uname.png.png

** Это где контекст приходит к спасению. **

Что такое контекст Ract?

API React Context позволяет легко получать доступ к данным на разных уровнях дерева компонентов. Он создает родительский компонент, который является контекстом, и он хранит все данные, которые доступны из всех компонентов проекта. В приведенном выше рисунке хранение хранит все состояния всех компонентов, и все компоненты будут получать доступ к всем состояниям любого компонента.

uname.png.png

Как работает контекст?

1. Создание контекста счетчика и добавление нового управления государством

import React, { useReducer } from "react";
let reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return;
  }
};
const initialState = { count: 0 }
const CounterContext = React.createContext(initialState);
function CounterProvider(props) {
const [state, dispatch] = useReducer(reducer, initialState);
return (
   
      {props.children}
    
  );
}
export { CounterContext, CounterProvider };

Если вы работали с Redux раньше, это, вероятно, будет выглядеть знакомым.

Мы сделали пару вещей здесь

  1. Создайте контртонтуку, который требуется как инициативный и экспортируем поставщики и контекст.
  2. Создайте редуктор, который принимает состояние и действие.
  3. Используйте деструктурируют массив, чтобы получить Государство и Отправка объект из Успеведщик Отказ
  4. Передайте значение {State, Dispatch} в CounterContext.Provider, поэтому мы можем передать общее состояние и отправлять всем компонентам.

2. Получите общие состояния и отправлять объекты в компонентах

function Counter() {
 const { state, dispatch } = useContext(CounterContext);
 return (
    

      
Count: {state.count}

      
    
    

  );
}

Так как мы прошли Государство и Отправка объекты как значение Countercontext.Provider Отказ Таким образом, он возвращает объект, имеющий функцию состояния и отправки. Мы можем использовать объект, используя USECONTEXT (COUNCONTEXT) и это возвращается как

{
  state: { count: 0 },
    dispatch: fn()
}

Если мы нажмем + кнопка затем отправляется и пропустите аргументы {Тип: “Приращение”} Затем функция редуктора должна позвонить, когда коммутатор сравнивает тип, и он возвращает {… состояние, счет: country.count + 1} Это означает, что счет увеличится на 1 и USECONTEXT () Потяните состояние из контекста.

Ссылка: https://reactjs.org/docs/hooks-reference.html#UseContext.

Читайте ещё по теме: