Как связать ваше приложение React с Redux

Увлекательное приключение для разработчиков React — это когда они связывают свое приложение React с избыточным ресурсом, и когда вы продвинулись так далеко, читая о React, это означает, что вы находитесь в процессе изучения готовой концепции управления глобальными состояниями. в вашем приложении. Эта статья будет полезна для разработчиков React при интеграции приложений React с Redux.

Хотя React дает нам возможность управлять состоянием для наших компонентов, зависимость родительских компонентов от дочерних компонентов и управления состоянием между двумя компонентами усложняется с увеличением размера приложения. Для решения этой проблемы у нас есть сторонняя библиотека Redux, которая предоставляет нам все эти замечательные функции, необходимые для глобального управления состоянием. Читайте дальше в приложении React с Redux .

Redux — это сторонняя библиотека JavaScript, которая используется для глобального управления состоянием вашего приложения. Его можно использовать с любым интерфейсным JavaScript-фреймворком, таким как React, Angular, Vue, Ember и многими другими, но чаще всего его используют с React.

Это дает нам возможность управлять нашим состоянием в одном месте с помощью таких понятий, как Reducer, Action и Store.

Мы создадим базовый проект React.js и пройдем пошаговую интеграцию Redux.

Настройка проекта

Теперь первое, что нужно сделать, это создать React Project, чтобы мы могли использовать нашу библиотеку Redux там. Мы можем сделать это с помощью create-реагировать-приложение. 

Обязательно прочитайте: Распространенные ошибки в разработке React и как их избежать?

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

Теперь ваш пример проекта React будет запущен на локальном хосте: 3000

Это простая настройка приложения React, в которой у вас будут все основные зависимости для приложения React. Чтобы подключить ваш компонент React к Redux Store, нам нужно установить несколько библиотек:

• Redux | команда



• React-Redux | команда

Создание магазина и соединение его с компонентом

Где мы создаем магазин? Ну, для меня это всегда в index.js, потому что там у нас есть самый корневой компонент App, из которого мы можем передавать состояния из Магазина.

Итак, первое, что мы делаем здесь, это создаем Store и для этого мы импортируем

И тогда мы создадим магазин

Поскольку нам нужно передать reducer в createStore (), мы будем создавать файл Reducer, в котором мы будем определять наши действия.

Reducer.js | основной

Здесь мы создали базовый редуктор с состоянием, которое возвращает состояние как есть.

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

Давайте соединим наш Магазин здесь с Компонентом.

Поскольку Redux является независимой библиотекой, и нам нужно связать ее с React, мы будем импортировать Provider из библиотекиact-redux внутри того же файла index.js.

И теперь нам нужно обернуть Root-компонент (в нашем случае это <App />) с провайдером. Это позволяет нам передавать наш магазин, содержащий состояние, в компонент React. Вы можете передать его так же, как и свойства в компоненте React.

Мы передадим его вместе с хранилищем имен свойств и информацией, поступающей от нашего редуктора, который мы также назвали хранилищем.

Файл App.js

Этот файл отвечает за все элементы пользовательского интерфейса. На этой странице мы будем выполнять наши основные задачи, такие как Увеличение, уменьшение, добавление, вычитание, сброс. Теперь я использовал загрузчик здесь, чтобы создать некоторый элемент пользовательского интерфейса, но не буду обсуждать его в этой статье, поскольку это не входит в сферу нашей темы.

importReact, { Component } from'react';
import'./App.css';
import { connect } from'react-redux'
import { Container, Card, Button,Row,Col } from'reactstrap'

classAppextendsComponent {
state = {
info :''
}
render() {
return (

<ContainerclassName="mt-5">

<div>

<Cardstyle={{"width":"350px" , "margin" :"0 auto" , "float" :"none", "marginBottom":"10px"}}>

<Card><pclassName="text-center mt-2">{this.props.value}</p></Card>

<RowclassName = "mt-3">

<Colmd="6"xs="6"sm="6"style={{"textAlign" :"right"}}>

<ButtonclassName="ml-1"onClick={()=>this.props._onInc()}>Increment</Button>

</Col>

<Colmd="6"xs="6"sm="6">

<ButtonclassName="ml-1"onClick={()=>this.props._onDec()}>Decrement</Button>

</Col>

</Row>

<RowclassName = "mt-1">

<Colmd="6"xs="6"sm="6"style={{"textAlign" :"right"}}>

<ButtonclassName="ml-1" >

</Col>

<Colmd="6"xs="6"sm="6">

<ButtonclassName="ml-1"style={{"width":"104px"}}onClick={()=>this.props._onSub()}>Subtract 3</Button>

</Col>

</Row>

<RowclassName = "mt-1 text-center">

<Colmd="12"xs="12"sm="12">

<ButtonclassName="ml-1 mb-2"onClick={()=>this.props._onReset()}>Reset</Button>

</Col>

</Row>

</Card>

</div>

</Container>
);
}
}

constmapStateToProps = (state) =>{
return {
state :state
}
}

constmapDispatchToProps = (dispatch) =>{
return{
      _onInc : () =>{
dispatch({
type :"ON_INCREMENT",
value :1
})
},
_onDec : () =>{
dispatch({
type :"ON_DECREMENT",
value :1
})
},
_onAdd : () =>{
dispatch({
type :"ON_ADD",
value :3
})
},
_onSub : () =>{
dispatch({
type :"ON_SUBTRACT",
value :3
})
},
_onReset : () =>{
dispatch({
type :"ON_RESET",
value :0
})
  }
   }
}

exportdefaultconnect(mapStateToProps,mapDispatchToProps)(App);

constmapStateToProps = (state) =>{
return {
value:state.value
}
}

<Card><pclassName="text-center mt-2">{this.props.value}</p></Card>

constmapDispatchToProps = (dispatch) =>{
return{
_onInc : () =>{
dispatch({
type :"ON_INCREMENT",
value :1
})
}
}
}