Я использую НОВЫЙ контекстный API или я использую Redux?

Question

Я изучил React и научился использовать Context API, но я слышал, что есть «новый контекстный API», и так как я изучил React с каким-то старым курсом (конец 2017 г.), я не не знаю, использую ли я новый или старый Context API. Кроме того, я только что обнаружил Redux, и он почти не похож на то, что я использую, поэтому Redux и Context API одинаковы в конце?

Посмотрите на мой код:

Вот мой context.js:

import React, {Component} from 'react'

const Context = React.createContext();

const reducer = (state, action) => {

    switch(action.type) {
        case 'DELETE_CONTACT' :
        return {
            ...state,
            contacts: state.contacts.filter(contact => 
                contact.id !== action.payload)
        };
        default: 
        return state;
    }

}

export class Provider extends Component {
    state = {
        contacts : [
            {
                id: 1,
                nom : 'John Doe',
                email : 'john@gmail.com',
                tel : "555-555-5555"
            },
            {
                id: 2,
                nom : 'John Doe',
                email : 'john@gmail.com',
                tel : "555-555-5555"
            },
            {
                id: 3,
                nom : 'Hugo Doe',
                email : 'john@gmail.com',
                tel : "555-555-5555"
            }
        ],
        dispatch: action => {
            this.setState(state => reducer(state,action))
        }
    }

    render() {
        return (
            <Context.Provider value={{
                state: this.state,
                sayHello: () => console.log("Hello World")

            }}>
            {this.props.children}
            </Context.Provider>
        )
    }
}

export const Consumer = Context.Consumer;

Обратите внимание, что я использую "Reducer" и "Dispatch", которых нет даже в официальной документации React для "Context" :(?

Также вы можете посмотреть на моего "потребителя":

import React, { Component } from 'react'
import Contact from './Contact'
import {Consumer} from '../context'

export default class Liste extends Component {

  render() {

    return (
      <Consumer>
        {value => {
          return(
            <React.Fragment>
            {value.state.contacts.map(contact => (
                <Contact 
                key={contact.id}
                id={contact.id}
                nom={contact.nom}
                email={contact.email}
                tel={contact.tel}
                />
            ))}
          </React.Fragment>
          )
        }}
      </Consumer>
    )
  }


}

Каковы конкретные различия между контекстом и реакцией? Могу ли я использовать Редуктор с Контекстом? Я использую старый или новый контекст? Почему Context подходит для маленьких приложений и Redux для больших?

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

Может ли кто-нибудь проявить доброту, чтобы просветить меня?

Answer 1

Из приведенных выше примеров не похоже, что вы используете Redux вообще.

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

Поскольку React Context API с хуками не работал до React ~ v.8.8, Redux был единственным вариантом для передачи данных. Теперь, с помощью Context API и хуков, я предсказываю, что вы увидите, как Redux исчезнет на закате. Тем не менее, я должен заметить, что при плохой реализации Context API может быстро стать головной болью, когда раздел ваших приложений требует нескольких различных контекстов.

Вот небольшое приложение, которое я создал при изучении контекста React, и ловушки, которые могут помочь вам лучше понять их:

https://github.com/Borduhh/react-hooks-context-example

Answer 2

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

Context API не является менеджером состояний, как Redux. Его можно использовать как единое целое, но лучше передавать данные (например, стили или аутентификацию), а не изменять / изменять их. Контекст использует тег провайдера + реквизит рендера для передачи данных. когда изменяются данные контекста, все (все дочерние элементы) внутри тега провайдера перерисовываются. Поэтому, если у вас есть все приложение или его большое количество, завернутое в провайдере, вы можете проверить свои повторные визуализации.

Redux - это менеджер состояний, который используется, когда у вас большое количество состояний (ваш вызов по определению большого). Его немного сложно настроить, но вы получаете очень мощную зрелую стороннюю библиотеку для управления состоянием. Он имеет отличные инструменты разработки и очень эффективен при правильной настройке.

Hooks API открыл новые двери в государственном управлении. На мой взгляд, это середина перед редуксом.

проверить репо useContext + useReducer + независимые повторные рендеры:

Пример поставщика контекста: https://github.com/joha0033/race-series-2/blob/master/src/Context/Authorization/authorization.js

Использование Context Wrapper Пример: https://github.com/joha0033/race-series-2/blob/master/src/App.js

Я бы посмотрел на то, как привыкнуть к хукам и как они играют роль в новом управлении состоянием вашего приложения.

Используемый в настоящее время Context API должен быть самым последним. Последнее обновление React (с перехватчиками) включало перехват, называемый useContext. эта ловушка не меняет способ создания или предоставления контекста, но упрощает его использование в компонентах, которые зависят от контекста.

Вот некоторые мои ресурсы:

https://testdriven.io/blog/react-hooks-primer/

https://testdriven.io/blog/react-hooks-advanced/