В чем основное различие между использованием React-Redux Hooks и React-Redux Connect ()? - PullRequest
Новая
       8

В чем основное различие между использованием React-Redux Hooks и React-Redux Connect ()?

2 голосов
/ 20 сентября 2019

Я собираюсь начать проект с React-Redux.Для ссылок API есть Hooks и connect ().Так как Hooks являются альтернативой API-интерфейсов подключения.В чем разница использования хуков или подключения к моему проекту React-Redux.

Ответы [ 4 ]

2 голосов
/ 20 сентября 2019

React-Redux внутренне использует React Context для подключения компонентов к хранилищу.

Функция connect() объединяет ваш компонент в другой компонент, который подключается к контексту хранилища, и пересылает выбранныйукажите свой компонент в качестве реквизита.

Если вы позвонили ... 

const YourConnectedComponent = connect(mapStateToProps)(YourComponent)`

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

const YourConnectedComponent = props => (
    <StoreContext.Consumer>
        {state => <YourComponent {...props} {...mapStateToProps(state, props)} />}
    </StoreContext.Consumer>
);

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

Хук useSelector также использует контекст хранилища, но без создания компонента вмежду для этого.Он напрямую возвращает выбранное состояние для компонента, чтобы использовать его.Он внутренне использует useContext, который является "способом перехвата" для использования контекста.

useDispatch просто выставляет dispatch() вашему компоненту, чтобы он мог выполнять с ним действия.

Техническирезультат более или менее одинаков независимо от того, используете вы хуки или connect().

1 голос
/ 20 сентября 2019

connect - это High Order Component, задача которого - предоставить способ подключения магазина Redux к вашему components.useSelector и useDispatch являются эквивалентными hooks.Просто еще один способ сделать то же самое. 

class Component extends React.Component{
    componentDidMount(){
        const { fetchApi, arg } = this.props
        fetchApi(arg)
    }
}
const mapDispatchToProps = dispatch =>({
    fetchApi : arg => dispatch(fetchApi(arg))
})
const mapStateToProps = state =>({
    arg : state.arg
})

export default connect(mapStateToProps, mapDispatchToProps)(Component)

Теперь эквивалент с использованием hooks

const Component = () =>{
    const dispatch = useDispatch()
    const arg = useSelector(state => state.arg)

    useEffect(() =>{
       dispatch(fetchApi(arg))
    },[dispatch, arg])
}

Оба делают одно и то же, это только другой подход для подключения redux до components внутренний state.Оба используют контекст Redux для показа dispatch и state внутри данного component

1 голос
/ 20 сентября 2019

Хуки позволяют вам напрямую получать доступ к dispatch и состоянию редукции, не подключая компонент с помощью connect, а хуки могут использоваться только в функциональных компонентах

Connect позволяет нам связывать наш компонент (Класс или функционал) с redux-store,

Вы можете обратиться к react-redux документации по хукам из этой ссылки.

Это дало различные хуки, такие как

useSelector с помощью которого мы можем получить доступ к хранилищу избыточных данных useDispatch возвращает dispatch функцию, с помощью которой мы можем отправлять действия с избыточными числами

Пример использования перехватных ловушек для компонента будет (Можно использовать это только в функциональныхКомпоненты) 

functions Test() {
const dispatch = useDispatch()
const count = useSelector(state => state.counter)
// If you want to dispatch a redux action using hooks then
// Assume a redux action called increaseCounter

return (
<>
<p>{count}</p>
<button onClick={() => {dispatch(increaseCounter(count + 1))}}>
ClickMe!
</button></>)
}

Если вы хотите достичь того же, используя connect, то (вы можете использовать это в классе или функциональных компонентах) 

function Test() {
  return (
    <>
      <p>{this.props.count}</p>
      <button onClick={() => {this.props.increaseCounter(this.props.count+1)}}>Click Me!</button>
    </>
  );
}

const mapStateToProps = state => {
  return {
    count: state.counter
  };
};

const mapDispatchToProps = dispatch => {
  return bindActionCreators({ increaseCounter }, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(Test)
0 голосов
/ 20 сентября 2019

В чем разница использования хуков или подключения к моему проекту React-Redux

Существует два основных различия:

  • Область действияconnect может использоваться как с компонентами класса React, так и с компонентами функций, тогда как хуки могут использоваться только с компонентами функций.

  • Производительность против простотыИспользование хуков проще.Простота имеет свою цену: в вашем распоряжении меньше настроек производительности по сравнению с connect.Что сложнее: вы называете это передачей параметров конфигурации (несколько или несколько) и возвращаете «настроенный вариант» connect.Этот вариант - HOC, который вы называете передачей в свой компонент, чтобы вернуть его обратно в оболочку.Одним из основных параметров конфигурации является уже упомянутая функция mapStateToProps.Вам не нужно его использовать, но в большинстве случаев вам это понадобится.Есть 4 другие функции, которые существуют исключительно для того, чтобы предоставить вам различные возможности для улучшения производительности компонента, который вы собираетесь обернуть, используя connect.Функции называются:areStatesEqualareStatePropsEqualareOwnPropsEqualareMergedPropsEqualВсе 4 являются необязательными.В качестве параметров конфигурации connect вы можете указать ни один, или некоторые, или все из них и настроить производительность.Стоит отметить, что даже если вы передадите значение none, тогда будут применены реализации этих функций по умолчанию (которые фактически помогают повысить производительность), и в результате вы получите упакованный компонент, который более оптимизирован с точки зрения производительности, чем его аналог с использованием перехватчиков.

...