Реагируйте, зачем использовать Redux

Question

Прошло много времени с тех пор, как я разработал интерфейс с React и Redux.Redux по-прежнему актуален в разработке React?Каковы преимущества Redux по сравнению с простым использованием состояния компонентов React, реквизита и хуков жизненного цикла без глобального состояния, такого как Redux?Для меня глобальное состояние пахнет анти-паттерном и не очень функционально.

Кроме того, каков наилучший способ загрузки проекта React, включая самые надежные компоненты для маршрутизации и подключения REST?

Answer 1

Redux по-прежнему актуален, но некоторые варианты использования были заменены.

Вариант использования: кэширование HTTP-ответов

Теперь мы можем использовать ReactJS Context API .Для тех, кто использует GraphQL, клиент Apollo также выполняет некоторое кэширование .

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

Опять же, теперь мы предпочитаем использоватьAPI контекста ReactJS для этого.

Глобальное или локальное состояние

В ReasonML / ReasonReact , будущее ReactJS, редукторывстроены в компоненты , но на уровне компонентов.По умолчанию глобальное состояние отсутствует.

Redux - это, в основном, реализация JavaScript архитектуры Elm , которая использует глобальное состояние (и, безусловно, функционально).

Тестируемость

Для меня причина использования Redux - тестируемость.

Поскольку большинство кода Redux, который вы пишете, являются функциями, а многие из них чистые, их легко протестировать без насмешек..

источник

Начальная загрузка

Facebook только что выпустила create-react-app версия 2.

https://github.com/facebook/create-react-app/releases

Проверьте это!

Маршрутизация

Использование React Router

REST

GraphQL довольно популярен среди ReactJSсообщества.TL; DR заключается в том, что в основе React лежит способность связывать все компоненты разметки, стилей и поведения.С GraphQL мы можем также размещать данные компонента.* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * [10]. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *.используйте Context API для кеширования любых ответов.

Answer 2

1-е преимущество: с Redux - вы можете получить доступ к состоянию из каждого компонента в вашем приложении.без Redux вам нужно связать состояние как подпорку от родителя к потомку, проблема в том, что слишком много цепочек, трудно понять код.например:

//Trying to pass the state of FirstComponent as props to ThirdComponent

class FirstComponent extends React.Component {
    state = {
        firstComponentState: 'some value'
    }

    render() {
        return (
            <SecondComponent 
                firstComponentState={firstComponentState}
            />
        )
    }
}


const SecondComponent = (props) => (
        <ThirdComponent 
            firstComponentState={props.firstComponentState}
        />
)

const ThirdComponent = (props) => (
    <div>{props.firstComponentState}</div>
)

Если ThirdComponent требуется доступ к состоянию FirstComponent - нам нужно связать состояние от родителя до потомка, пока оно не достигнет нужного компонента.Теперь, как будет выглядеть наш код, если нам понадобится связать состояние на 10 уровней вниз?это будет очень трудно понять.но с Redux - все, что нам нужно сделать, это подключить ThirdComponent к глобальному избыточному состоянию и использовать его.

** 2-е преимущество: * Проходное состояние между братьями и сестрами.рассмотрите этот код:

//Trying to pass the state of FirstSibling to SecondSibling

const Parent = () => (
    <div>
        <FirstSibling/>
        <SecondSibling/>
    </div>
)

class FirstSibling extends React.Component {
    state = {
        data: 'pass me to SecondSibling'
    }

    render() {
        return (
            <div>Something..</div>
        )
    }
}

const SecondSibling = () => (
    <div>I need the state of FirstSibling</div>
)

Без Redux как мы можем передать состояние компонента FirstSibling компоненту SecondSibling?для этого нам нужно передать состояние на один уровень вверх - от FirstSibling до Parent, а от Parent - до SecondSibling.Это не лучшая практика для цепочки реквизита от детей к родителю.Теперь представьте, что у FirstSibling и SecondSibling есть дети, и мы хотим передать состояние между ними - код становится нечитаемым.но опять же, с Redux - все, что нам нужно сделать, это подключить нужный компонент к глобальному состоянию и получить данные напрямую.

Answer 3

Все еще очень актуально.Спросите себя: «Управление состоянием становится слишком сложным, и я должен передать состояние через компоненты, которые не используют его слишком часто?»Если это так, используйте излишек.Нет?В этом нет необходимости.

Преимущества заключаются в том, что он упрощает код и справляется с передачей состояния.