Самый простой способ передать данные от родителя к дочернему в приложении React — это передать их в дочерний props. Но возникает проблема, когда глубоко вложенному дочернему элементу требуются данные от компонента, расположенного выше в дереве. Если мы будем передавать данные через props, каждый из дочерних элементов будет обязан принять данные и передать их своему дочернему элементу, что приведет к детализации реквизита, ужасная практика в мире React.

Чтобы решить проблему с подробным описанием, у нас есть Решения для управления состоянием, такие как Context API и Redux. Но какой из них лучше всего подходит для вашего приложения? Сегодня мы собираемся ответить на этот извечный вопрос!

Что такое Контекстный API?

Давайте проверим официальную документацию:

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

Context API — это встроенный инструмент React, который не влияет на окончательный размер пакета и интегрирован по умолчанию.

Чтобы использовать Context API, необходимо:

  • Создайте контекст
const Context = createContext(MockData);
  • Создайте Provider для Context.
const Parent = () => {
    return (
        <Context.Provider value={initialValue}>
            <Children/>
        </Context.Provider>
    )
}
  • Использование данных в Context
const Child = () => {
    const contextData = useContext(Context);
    // use the data
    // ...
}

Так что же такое Редукс?

Конечно, давайте перейдем к документации:

Redux — это контейнер предсказуемого состояния для приложений JavaScript.

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

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

Redux — это библиотека с открытым исходным кодом, которая предоставляет центральное хранилище и действия для изменения хранилища. Его можно использовать с любым проектом, использующим JavaScript или TypeScript, но поскольку мы сравниваем его с Context API, мы будем придерживаться >Приложения на основе React.

Чтобы использовать Redux, вам необходимо:

  • Создайте редуктор
import { createSlice } from "@reduxjs/toolkit";

export const slice = createSlice({
    name: "slice-name",
    initialState: {
        // ...
    },
    reducers: {
        func01: (state) => {
            // ...
        },
    }
});

export const { func01 } = slice.actions;
export default slice.reducer;
  • Настройте Магазин
import { configureStore } from "@reduxjs/toolkit";
import reducer from "./reducer";

export default configureStore({
    reducer: {
        reducer: reducer
    }
});
  • Сделайте Магазин доступным для потребления данных
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App.jsx'
import store from './store';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);
  • Используйте State или Dispatch Actions.
import { useSelector, useDispatch } from 'react-redux';
import { func01 } from './redux/reducer';

const Component = () => {
    const reducerState = useSelector((state) => state.reducer);
    const dispatch = useDispatch();
    const doSomething = () = > dispatch(func01)  
    return (
        <>
            {/* ... */}
        </>
    );
}
export default Component;

Вот и все, Уф! Как видите, для настройки Redux требуется гораздо больше усилий.

Сравнение Redux и Context API

Из таблицы вы должны понять, откуда взялось популярное мнение Redux для больших проектов и Context API для маленьких.

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

Так что вам больше не придется к тому парню, который идет:

Подведение итогов

В этой статье мы рассмотрели, что такое Redux и Context API, а также их различия. Мы узнали, что Context API — это легкое решение, которое больше подходит для передачи данных от родительского объекта к глубоко вложенному дочернему и >Redux — это более надежное решение для управления состоянием.

Удачной разработки!

Согласно исследованиям, записывая свои цели ручкой и бумагой, вы повышаете вероятность их достижения на 21%–39%. Ознакомьтесь с этими блокнотами и журналами, чтобы облегчить путь к достижению своей мечты: https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR

Нужен фрилансер по фронтенд-разработке с самым высоким рейтингом, чтобы избавиться от проблем с разработкой? Свяжитесь со мной на Upwork

Хотите увидеть, над чем я работаю? Загляните на мой Персональный сайт и GitHub

Хотите подключиться? Свяжитесь со мной в LinkedIn

Первоначально опубликовано на https://dev.to 28 ноября 2021 г.