Создавайте настраиваемые состояния хуков в React и управляйте глобальным состоянием отовсюду без использования какой-либо сторонней библиотеки управления состоянием

Question

Вы можете получить , ссылка здесь в этой Ссылка на StackBlitz

У меня есть один файл папки todoState.ts в models папке проекта. Этот todoState.ts используется для управления глобальным состоянием приложения с помощью настраиваемых хуков. Мне нужно выполнить следующие задачи на глобальном todoState.ts ..

1. Добавить новое состояние
2. Удалить состояние
3. состояние обновления

здесь код todoState.ts.

import { useState, useEffect } from "react";

const todoState = (todo?, callback?) => {
      const [todos, setTodos] = useState([todo]);

      useEffect(()=>{
          setTodos(todo);
      },[])

    return [{todos, setTodos}];
}

Теперь, У меня есть два пользовательских компонента, которые зависят от globalState. которые равны 1. <TodoForm /> и <TodoListLineItem />

Оба вышеуказанного компонента отображаются внутри index.tsx.

Как я могу управлять глобальным состоянием всех компонентов в том числе index.tsx, <TodoForm />, <TodoListLineItem />. Здесь ...

1. <TodoForm />, используется для добавления задач в список.
2. <TodoListLineItem />, используется для отображения всех добавленных задач из Компонент TodoForm. когда пользователь наводит курсор на каждый элемент списка задач, пользователь может удалить конкретный элемент задач из состояния глобального управления. функция управления состоянием?

   Как один компонент изменил состояние с A на B, что отражается на связанном компоненте, просто управляя глобальным объектом состояния приложения. Если я помещу useState([]) в index.tsx, он будет работать нормально, но я хочу управлять состоянием из файла TodoState.ts. Спасибо.

   экспорт по умолчанию todoState;

Answer 1

Наконец, , я обнаружил и изучил новые концепции React-Context API. Вы можете оформить заказ здесь Ссылка на StackBlitz

Для управления глобальными состояниями React предоставляет context-api. Используйте только тогда, когда у вас есть несколько уровней свойств компонентов, передаваемых в дереве компонентов сверху вниз. Я использовал очень небольшой пример, чтобы понять api контекста для моего другого варианта использования.

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

1. createContext [ используется для создания глобального контекста состояния]
2. useContext [используется для получения состояний из контекста из дочернего компонента].

Для работы с контекстом я создал его <context.Provider> составная часть. и все задачи управления состоянием выполняются только на этом уровне компонентов. все дочерние компоненты просто отправляют события о том, что делать. и глобальный контекст компонента провайдера изменяется соответственно.

сначала , Создать контекст ..

export interface ItodoContext{
  todoState? : Itodo[];
  addNewTodoState?: (state?: string) => void;
  removeTodoItemByIndex? : (index?: number) => void;
}

export const todoContext = createContext<ItodoContext[]>([{}]);

Так как я использую функциональный компонент React-Typescript в соответствии с интерфейсом контекста я определил все задачи состояний. Я передал всю TodoState, функцию для управления TodoState, например addNewTodoState, removeTodoItemByIndex.

затем создаю Provider of context ..

const allTodoStates = {
  todoState,
  addNewTodoState,
  removeTodoItemByIndex
}

return(
  <todoContext.Provider value = { [allTodoStates]}>      
     {props.children}
  </todoContext.Provider>
)

Затем я устанавливаю Provider как родительский компонент в дереве в компоненте index.tsx вот так ..

 const App: FC = () => {
 return (
   <div className="h-100 w-100">
     <TodoStateProvider>
       <Navbar />
       <div className="container">
         <TodoForm />  
         <TodoListLineItem />
       </div>
     </TodoStateProvider>
   </div>
 );  
}

См. выше все компоненты, теперь дочерние для <TodoStateProvider> родительского компонента.

Когда мне нужно добавить новое состояние в контекст, находится внутри <TodoForm> и как мы можем Состояние добавления выглядит так, как показано ниже:

const [{addNewTodoState}] = useContext(todoContext);

const sendTodoItem = (e) => {
      addNewTodoState(todoInput.trim());
}

и так далее .. Компонент провайдера имеет свойство value, и мы можем получить эти свойства от дочернего элемента с помощью ловушки useContext (). как мы использовали выше. См. Полную рабочую демонстрацию, которую я прикрепил по ссылке выше на StackBlitz.