Рубрики
Без рубрики

Создание приложения React с Redux для управления потоками данных

React – это библиотека пользовательского интерфейса. Он не заинтересован в управлении потоками данных. Redux – это библиотека, которая управляет потоком данных в приложении React. И вот как построить это приложение.

Автор оригинала: Vijay Thirugnanam.

Что реагирует?

RECT – это библиотека JavaScript, используемая для создания интерактивных пользовательских интерфейсов. Реагирование разработано и поддерживается Facebook как Библиотека с открытым исходным кодом Отказ Реагистрационная документация является всеобъемлющей.

React имеет HTML, CSS и JavaScript, определенный в компонентах. Планка HTML предписана в декларативном стиле с использованием JSX. CSS определяется с помощью встроенных стилей. Взаимодействия пользовательского интерфейса доступны в виде пользовательских обработчиков событий внутри компонентов реакции.

Каждый компонент реагирования поддерживает реквизит и состояние. Опоры передаются к компоненту для настройки компонента. Состояние используется для изменения того, как компонент отображается во время выполнения. Актуальный компонент может изменить его состояние, но не может изменить его реквизиты. Родительский компонент, содержащий компонент, может изменить реквизиты. Компонент повторно оказывает себя, когда реквизиты или изменения состояния.

Что такое redux?

React – это библиотека пользовательского интерфейса. Он не заинтересован в управлении потоками данных. Redux – это библиотека, которая управляет потоком данных в приложении React. Redux реализует ни однонаправленный поток данных.

Действия, магазин и редукторы лежат в сердце redux. Магазин – это где содержится данные. Чтобы обновить магазин, React Components Emit Actions. Магазин обновляется с помощью редуктора, который может обрабатывать действие. Обновленный магазин доступен для компонентов реагирования через реквизиты.

Обзор приложения образца

Применение образца, которое управляет потоками данных, мы собираемся построить приложение «волонтер». Доноры крови могут добровольно войти в название в форме добавления доноров. Список доноров можно просматривать в компоненте DONOR DISPLAY. Классы JavaScript, участвующие в приложении образца, показаны на диаграмме ниже.

Топ три класса, Adddonoraction , Магазин и Доноредитель принадлежит redux. В типичном применении будет много действий и редукторов. Однако Redux обеспечивает только один магазин для данных.

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

React-redux.

Создание компонентов реагирования

Форма компонента

Каждый реактивный компонент имеет Рендер функции Отказ Функция Render называется несколько раз всякий раз, когда реквизиты или состояние изменений компонента. Функция визуализации Донорформ Компонент показан ниже:

  render() {
    return (
      

        

          
          
        

        

          
        

      

    );
  }

Компонент имеет текстовое поле и кнопку отправки. Текстовое поле – управляемый компонент. HandleChange Событие текстового поля меняет состояние и значение.

Handlesubmit Функция проходит по функциональности отправки в родительский компонент, приложение.

Отображать компонент

Компонент отображения отображает все доноры. Код для функции рендеринга для компонента отображения отображается ниже.

  render() {
    return (
      

        {this.props.volunteers.length > 0 ? (
          this.props.volunteers.map((v) => (
            

            {v.name}
            

          ))
        ) : null}
      

    );
  }

Список волонтеров (доноров) передается на компонент отображения из компонента приложений (родитель). Компонент отображения илетет через каждого волонтера и отображает имя волонтера.

Компонент приложения

Компонент приложения содержит как компонент формы, так и компонента отображения. Функция рендеринга компонента приложения показана ниже.

render() {
    return (
      

        

          
Volunteer

        

        

          
        

        

          
Donors

          

            
          

        

      

    );
  }

Компонент приложений обрабатывает функцию отправки компонента формы. Компонент приложений обеспечивает массив доноров к компоненту отображения.

Создание функций redux

Redux можно установить с помощью NPM. Как Redux, и React-redux должны быть установлены через NPM.

npm i redux react-redux --save

Действия

Действия в redux – это функции, которые возвращают объект действий. Объект действий содержит тип действия и данные действия. Мы хотим добавить донора в систему. Чтобы добавить доноров, мы должны определить Adddonoraction следующим образом.

export function addDonorAction(donor) {
  return {
    type: actionTypes.addDonor,
    donor,
  };
}

Редукторы

Редукторы в Redux являются функциями, которые обновляют состояние хранилища. Магазин можно рассматривать как коллекцию редукторов, каждый из которых поддерживает свое собственное состояние. Чтобы обновить массив доноров, мы должны определить Доноредитель следующим образом.

export default function donorReducer(state = [], action) {
  switch (action.type) {
    case actionTypes.addDonor:
      return [...state, action.donor];
    default:
      return state;
  }
}

Редуктор получает начальное состояние и действие. На основании типа действия он возвращает новое состояние для магазина. Государство, поддерживаемое редукторами, неизменны. Мы возвращаем новый государственный объект всякий раз, когда государственные изменения.

Магазин

При использовании Redux есть только один магазин. Магазин настроен через Createstore функция.

export function configureStore(initialState) {
  return createStore(rootReducer, initialState);
}

Createstore Функция принимает корневой редуктор и начальное состояние. Начальное состояние может произойти из постоянного магазина, такого как база данных. Коренный редуктор представляет собой коллекцию всех редукторов в приложении.

const rootReducer = combineReducers({
  donors: donorReducer,
});

Интеграция реагирования с Redux

Мы определили компоненты реагирования. Мы определили функции Redux. AppContainer Является ли компонент контейнера, который имеет код интеграции для подключения компонентов React с функциями Redux. Для облегчения интеграции доступно пакет RACT-REDUX NPM.

Код для AppContainer показано ниже.

const mapStateToProps = (state) => {
  return {
    donors: state.donors,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onAddDonor: (donor) => dispatch(addDonorAction(donor)),
  };
};

const AppContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

Функция Connect в React-redux создает AppContainer составная часть. AppContainer это контейнерный компонент, который имеет два дополнительных реквизита; доноры и Онадддонор Отказ Эти свойства прикреплены двумя функциями помощника, MapstatetoProps и mapdispatchtopops Отказ

MapstatetoProps Функция прикладывает состояние хранилища в реквизиты. В нашем примере новая реквизит называется доноры прилагается. Всякий раз, когда React Component использует доноры, возвращается состояние, поддерживаемое соответствующим редуктором.

mapdispatchtopops Функция прикладывает функцию для реквизитов, которые отправляют действие в магазин. В нашем примере Онадддонор Опирая рассылает соответствующее действие в магазин. Отправка действий в магазине будет вызывать соответствующую функцию редуктора, которая будет обновлять данные хранилища.

Проект GitHub

Redux вводит некоторую сложность к приложению реагирования. К счастью, сложность – одноразовое усилие. Есть Проект GitHub доступны как стартовый проект. Проект Starter имеет основу для управления потоками данных в приложении React с использованием Redux.

Читайте ещё по теме: