» » » Использование функции connect() из пакета react-redux

 

Использование функции connect() из пакета react-redux

Автор: admin от 14-09-2018, 10:20, посмотрело: 23

В статье, перевод которой мы публикуем сегодня, речь пойдёт о том, как создавать в React-приложениях компоненты-контейнеры, которые связаны с состоянием Redux. Этот материал основан на описании механизма управления состоянием в React с применением пакета react-redux. Предполагается, что у вас уже есть базовое понимание архитектуры и API библиотек, о которых мы будем говорить. Если это не так — обратитесь к документации по React и Redux.



Использование функции connect() из пакета react-redux


Flux, Redux, MobX.



Redux — это библиотека, предназначенная для создания контейнеров, используемых для хранения состояния приложения. Она предлагает разработчику понятные инструменты для управления состоянием, которые ведут себя предсказуемо. Данная библиотека подходит как для приложений, написанных на чистом javascript, так и для проектов, при разработке которых использовались какие-нибудь фреймворки. Redux отличается маленькими размерами, но при этом позволяет писать надёжные приложения, работающие в различных средах.



Вот как создают хранилища Redux:



import { createStore } from 'redux';

const initialState = {
    auth: { loggedIn: false }
}

const store = createStore((state = initialState, action) => {

    switch (action.type) {

        case "LOG_IN": 
            return { ...state, auth: { loggedIn: true } };
            break;

        case "LOG_OUT":
            return { ...state, auth: { loggedIn: false } };
            break;

        default:
            return state;
            break;

    }
    
})


Пакет react-redux



Пакет react-redux предоставляет привязки React для контейнера состояния Redux, чрезвычайно упрощая подключение React-приложения к хранилищу Redux. Это позволяет разделять компоненты React-приложения, основываясь на их связи с хранилищем. А именно, речь идёт о следующих видах компонентов:




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

  2. Компоненты-контейнеры. Они ответственны за работу внутренних механизмов приложения и взаимодействуют с состоянием Redux. Их часто создают с использованием react-redux, они могут осуществлять диспетчеризацию действий Redux. Кроме того, они подписываются на изменения состояния.



Подробности о подобном подходе к разделению ответственности компонентов можно почитать здесь. В этом материале мы будем, преимущественно, говорить о компонентах-контейнерах, подключённых к состоянию Redux с использованием react-redux.



Пакет react-redux обладает очень простым интерфейсом. В частности, самое интересное в этом интерфейсе сводится к следующему:




  1. — позволяет создавать обёртку для React-приложения и делать состояние Redux доступным для всех компонентов-контейнеров в его иерархии.

  2. connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) — позволяет создавать компоненты высшего порядка. Это нужно для создания компонентов-контейнеров на основе базовых компонентов React.



Установить react-redux с целью использования этого пакета в проекте можно так:



npm install react-redux --save


Исходя из предположения о том, что вы уже настроили хранилище Redux для своего React-приложения, вот пример подключения приложения к хранилищу Redux:



import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import createStore from './createReduxStore';

const store = createStore();
const rootElement = document.getElementById('root');

ReactDOM.render((
  <Provider store={store}>
    [leech=https://github.com/reduxjs/react-redux/blob/master/docs/api.md]Вот[/leech] страница документации, ознакомившись с которой, вы можете узнать о том, какие параметры можно использовать с <code>connect()</code>, и о том, как они модифицируют поведение этой функции.



<h2><font color="#3AC1EF">Использование функции connect()</font></h2>

<h3><font color="#3AC1EF">?Создание хранилища</font></h3>

Прежде чем преобразовывать обычный компонент React в компонент-контейнер с использованием <code>connect()</code>, нужно создать хранилище Redux, к которому будет подключён этот компонент.



Предположим, что у нас имеется компонент-контейнер <code>NewComment</code>, который используется для добавления новых комментариев к публикации, и, кроме того, выводит кнопку для отправки комментария. Код, описывающий этот компонент, может выглядеть так:



[code]import React from 'react';
import { connect } from 'react-redux';

class NewComment extends React.Component {

  input = null
  
  writeComment = evt => {
    evt.preventDefault();
    const comment = this.input.value;
    
    comment && this.props.dispatch({ type: 'WRITE_COMMENT', comment });
  }
  
  render() {
    const { id, content } = this.props.comment;
    
    return (
      <div>
        <input type="text" ref={e => this.input = e} placeholder="Write a comment" />
        <button type="button" onclick={this.writeComment}>Submit Comment</button>
      </div>
    )
  }
  
}

export default connect()(NewComment);


Для того чтобы этим компонентом можно было воспользоваться в приложении, надо будет описать хранилище Redux, к которому этот компонент необходимо подключить. В противном случае произойдёт ошибка. Сделать это можно двумя способами, которые мы сейчас рассмотрим.



Установка свойства store в компоненте-контейнере



Первый способ оснастить компонент хранилищем Redux заключается в передаче ссылки на такое хранилище в виде значения свойства store компонента:



import React from 'react';
import store from './reduxStore';
import NewComment from './components/NewComment';

function CommentsApp(props) {
  return <NewComment store={store} />
}


Установка свойства store в компоненте



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



Пакет react-redux предоставляет разработчику компонент , который можно использоваться для оборачивания корневого компонента приложения. Он принимает свойство store. Предполагается, что оно представляет собой ссылку на хранилище Redux, которое планируется использовать в приложении. Свойство store передаётся, в соответствии с иерархией приложения, компонентам-контейнерам, с использованием механизма контекста React:



import React from 'react';
import ReactDOM from 'react-dom';
import store from './reduxStore';
import { Provider } from 'react-redux';
import NewComment from './components/NewComment';

function CommentsApp(props) {
  return <NewComment />
}

ReactDOM.render((
  <Provider store={store}>
    <CommentsApp />
  </Provider>
), document.getElementById('root'))


?Организация доступа к ownProps



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

Однако тут есть одна проблема. Если число обязательных параметров объявленной функции меньше, чем 2, тогда ownProps передаваться не будет. Но если функция объявлена с отсутствием обязательных параметров или, как минимум, с 2 параметрами, ownProps будет передаваться.



Рассмотрим несколько вариантов работы с ownProps.



Объявление функции без параметров



const mapStateToProps = function() {
  console.log(arguments[0]); // state
  console.log(arguments[1]); // ownProps
};


В данной ситуации ownProps передаётся, так как функция объявлена без обязательных параметров. В результате будет работать и следующий код, написанный с использованием нового синтаксиса оставшихся параметров ES6:



const mapStateToProps = function(...args) {
  console.log(args[0]); // state
  console.log(args[1]); // ownProps
};


Объявление функции с одним параметром



Рассмотрим следующий пример:



const mapStateToProps = function(state) {
  console.log(state); // state
  console.log(arguments[1]); // undefined
};


Здесь имеется лишь один параметр, state. В результате arguments[1] принимает значение undefined из-за того, что ownProps не передаётся.



Объявление функции с параметром по умолчанию



const mapStateToProps = function(state, ownProps = {}) {
  console.log(state); // state
  console.log(ownProps); // {}
};


Здесь имеется лишь один обязательный параметр, state, так как второй параметр, ownProps, является необязательным из-за того, что для него задано значение по умолчанию. В результате, так как тут имеется лишь один обязательный параметр, ownProps не передаётся, и осуществляется маппинг со значением по умолчанию, которое было ему назначено, то есть, с пустым объектом.



Объявление функции с двумя параметрами



const mapStateToProps = function(state, ownProps) {
  console.log(state); // state
  console.log(ownProps); // ownProps
};


Тут всё устроено очень просто. А именно, в такой ситуации производится передача ownProps из-за того, что функция объявлена с двумя обязательными параметрами.



Итоги



Освоив этот материал, вы узнали о том, когда и как использовать API connect(), предоставляемое пакетом react-redux и предназначенное для создания компонентов-контейнеров, подключённых к состоянию Redux. Здесь мы довольно подробно рассказали об устройстве функции connect() и о работе с ней, однако, если вы хотите больше узнать об этом механизме, в частности — ознакомиться с вариантами его использования — взгляните на этот раздел документации по react-redux.



Уважаемые читатели! Пользуетесь ли вы пакетом react-redux в своих проектах?



Использование функции connect() из пакета react-redux

Источник: Хабр / Интересные публикации

Категория: Веб-разработка

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *