Новости программирования

Создайте приложение для реагирования, используя контекст, хуки и редукторы

Краткое описание по статье Создайте приложение для реагирования, используя контекст, хуки и редукторы

Название: Создайте приложение для реагирования, используя контекст, хуки и редукторы . Краткое описание: ⭐ Да, я знаю, о чем ты думаешь. Это не просто еще одн . Дата публикации: 24.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года


Да, я знаю, о чем ты думаешь. Это не просто еще одно руководство по списку задач, не так ли?
В этом посте я объясню небольшую продвинутую концепцию под названием React_. Контекст _ и как использовать его в приложении, создав очень простое приложение списка дел.

Ожидания

Этот пост предполагает базовое понимание фреймворка React.

Давайте начнем

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

Согласно официальной документации реакции

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

Почему/когда нам нужно использовать контекст?

Реагируйте на документацию снова на помощь

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

Ладно, хватит вступления. Теперь мы создаем базовое приложение для реагирования, используя стартовый набор create-react-app.
Для тех, кто хотел бы увидеть готовое приложение, вот предварительный просмотр полного кода.

Сначала создайте Todo.js файл внутри src каталог и добавьте в него следующий код. Этот компонент будет отображать кнопку и управляемый ввод

import React, { useState } from "react";

export default function Todo() {
  const [todo, setTodo] = useState("");

  return (
    <form>
      <input
        type="text"
        name="todo"
        value={todo}
        onChange={(e) => setTodo(e.target.value)}
      />
      <button>Add todo </button>
    </form>
  );
}

Затем создайте TodoList.js файл и src каталог. Этот компонент будет отображать наш список дел, но пока он просто отображает h1 направляюсь к списку.

import React from "react";

export default function TodoList() {
  return (
    <div>
      <h1> Todo List </h1>
    </div>
  );
}

Теперь мы подходим к интересной части.
Чтобы использовать Context в реагирующем приложении, нам нужно создать контекст. Итак, создайте TodoContext.js В то же самое src каталог.
Добавьте в него следующую строку кода. Да, я знаю, что у нас нет ./reducer.js файл еще. Не волнуйтесь, мы создадим его в ближайшее время.

import React, { createContext, useReducer } from "react";
import reducer, { initialState } from "./reducer";

Создайте контекст с именем todoContext добавив следующую строку кода

export let todoContext = createContext({});

Далее создайте функциональный компонент Provider и пройти вниз children в качестве реквизита к нему.

export default function Provider({ children }) {

  const [state, dispatch] = useReducer(reducer, initialState);

  const values = {
    state,
    dispatch
  };

  return (
    <>
      <todoContext.Provider value={values}>
         {children}
      </todoContext.Provider>
    </>
  );
}

давайте объясним код выше.

  1. useReducer — хук useReducer похож на хук useState. Это позволяет использовать пользовательскую логику состояния. Если вы обнаружите, что отслеживаете несколько частей состояния, основанных на сложной логике, useReducer может оказаться полезным. Этот хук принимает два аргумента: редьюсер и начальное состояние.
  2. Наш Provider возвращает компонент context.Provider, который принимает свойство value и передает его дочерним элементам нашего Provider компонент.

Вот полный код для TodoContext.js

import React, { createContext, useReducer } from "react";
import reducer, { initialState } from "./reducer";

export let todoContext = createContext({});

export default function Provider({ children }) {

  const [state, dispatch] = useReducer(reducer, initialState);

  const values = {
    state,
    dispatch
  };

  return (
    <>
      <todoContext.Provider value={values}>
        {children}
      </todoContext.Provider>
    </>
  );
}

Давайте создадим наш reducer.js файл и добавьте в него приведенный ниже код

import { ADD_TODO } from "./constants";

export const initialState = {
  todos: []
};

const reducer = (state, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    default:
      return state;
  }
};

export default reducer;

Приведенный выше код создает начальное состояние и инициализирует todos пустым массивом. Затем мы добавили функцию-редуктор, функция-редуктор принимает состояние и действие в качестве аргументов и возвращает обновленное состояние в зависимости от типа отправленного действия, которое в нашем случае называется действием. ADD_TODO который будет определен в constants.js.
Создайте файл constants.js и добавьте к нему следующий код

export const ADD_TODO = "ADD TODO";

Как мы видим, Constants.js просто создает и экспортирует строковую переменную.

Далее мы обновляем код внутри нашего app.js файл, импортировав TodoContext.js, Todo.js и TodoList.js компонент.
app.js теперь должно выглядеть так

import React, { Component } from "react";
import Todo from "./Todo";
import TodoList from "./TodoList";
import Provider from "./TodoContext";

export default class App extends Component {
  render() {
    return (
      <div className="App">
        <Provider>
          <Todo />
          <TodoList />
        </Provider>
      </div>
    );
  }
}

Поскольку мы обернули наши компоненты в компонент Provider, теперь мы можем быть уверены, что у нас есть доступ к контексту в нашем Todo.js и TodoList.js.
Мы можем обновить Todo.js файл, чтобы теперь получить доступ к значению контекста, а также создать функцию addTodoHandler который отправляет тип действия ADD_TODO.
Ниже приведен полный код для Todo.js

import React, { useState, useContext } from "react";
import { todoContext } from "./TodoContext";
import { ADD_TODO } from "./constants";

export default function Todo() {
  const [todo, setTodo] = useState("");
  const { dispatch } = useContext(todoContext);

  const addTodoHandler = (e) => {
    e.preventDefault();
    dispatch({ type: ADD_TODO, payload: todo });
    setTodo("");
  };

  return (
    <form>
      <input
        type="text"
        name="todo"
        value={todo}
        onChange={(e) => setTodo(e.target.value)}
      />
      <button onClick={addTodoHandler}>Add todo </button>
    </form>
  );
}

Прохладный. Теперь все, что нам нужно сделать, это отображать нашу задачу всякий раз, когда пользователь нажимает кнопку Добавить задачу кнопка. И мы делаем это, сопоставляя наш массив todos, определенный в редуктор.js и вернуть jsx.
Ниже приведен полный код для TodoList.js

import React, { useContext } from "react";
import { todoContext } from "./TodoContext";

export default function TodoList() {
  const { state } = useContext(todoContext);
  return (
    <div>
      <h1> Todo List </h1>
      {state.todos.length > 0 &&
        state.todos.map((todo, id) => {
          return <h4 key={id}>{todo}</h4>;
        })}
    </div>
  );
}

Вот и все. Теперь вы узнали, что означает контекст, когда его использовать и что такое редюсер, а самое главное, вы узнали, как реализовать их в приложении, пусть и маленьком 😃.

Отказ от ответственности: для создания приложения todo, подобного этому, использование контекста и редуктора не является излишним. Но чтобы лучше продемонстрировать и объяснить эти концепции, мне пришлось выбрать пример, который не будет слишком сложным для понимания.

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


Source: codementor.io/community/new

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»