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

Реагировать – Redux. Менее чем за 7 минут

Внимание!!! Код, показанный в этой статье, является действительным внедрением Patte Redux … Помечено в React, Redux, JavaScript.

Код, показанный в этой статье, является действительным внедрением шаблона Redux, упомянутые из Официальный redux.js.org. . Тем не менее, Redux предоставил нам расширенный инструментарий, который рекомендует использовать при разработке с помощью React и Redux. Это полностью ваше решение на каком пути вы берете. Вы можете узнать больше о reduxjs/toolkit проверяя ссылку.

В этой статье я охвачу несколько фундаментальных концепций Redux и как построить простое приложение (приложение Counter), используя React и Redux.

Redux Предсказуемый государственный контейнер для приложений JavaScript. Это означает, что в приложении есть изменения, включая изменения, так и изменения пользовательских интерфейсов, эти изменения содержатся в одном объекте JavaScript называется Государство Отказ Государство часто называют Одностоищенная правда Потому что он никогда не мутируется или изменен, но вместо этого воссоздан. С Одностоищенная правда Мы можем лучше предсказать состояние заявки в момент подачи.

Перед погружением в приложение позволяет покрывать некоторые основы Redux.

Состояние

Государство это объект JavaScript, который представляет все состояние приложения Redux. Это может быть простой объект с одним значением или более сложным объектом.

{counter: 0}

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

Действия

Действие это описание того, как магазин должен изменить состояние.

{
  type: 'INCREMENT',
  value: 5, 
}

Изменение в приложении понимается действием Тип свойство. Все действия имеют свойство типа. Свойство типа объясняет в магазине, как ответить и воссоздать состояние. Создание государства занимается Редуктор Отказ

Редукторы

Редуктор – это функция JavaScript, которая создаст новое состояние на основе некоторого типа действий.

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case actionType.ADD:
            return {
                ...state,
                counter: state.counter + 1
          }
    }
    return state;
}

Редукторы часто называют чистыми функциями JavaScript. А Функция чистого JavaScript Это функция, которая дает тот же вход, всегда вернет один и тот же выход. Они называются чистыми функциями, потому что они являются предсказуемо и включить Нет побочных эффектов такие как сеть или базы данных. Самая импортная работа редуктора состоит в том, чтобы воссоздать состояние для хранить .

Хранить

А магазин это объект JavaScript, который содержит состояние приложения. Там должен быть только один магазин в приложении Redux.

{
  dispatch: Dispatch
  getState: () => State
  subscribe: (listener: () => void) => () => void
  replaceReducer: (reducer: Reducer) => void
}

Методы хранения

  • Отправка (действие) : Отправляет действие
  • getstate () : Возвращает текущее состояние
  • Подписаться (слушатель) : Добавляет смену слушателя
  • Запретивник (Nextreducer) : Заменяет редуктор

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

В этом разделе я охвачу шаги для создания простого приложения счетчика с помощью React и Redux. Чтобы увидеть приложение Код .

Начиная

Во-первых, я создам основное приложение React с NPX. и установить необходимые зависимости: React-redux и redux Отказ

npx create-react-app redux-practice
cd redux-practice
npm i react-redux redux

Далее я создам три новых каталога для управления файлами моего приложения.

mkdir src/store
mkdir src/containers
mkdir src/components
  • SRC/Store – Редукторы и действия, необходимые для Redux Store
  • SRC/контейнеры – компоненты, подключенные к магазину Redux
  • SRC/Компоненты – компоненты презентационного уровня

Я начну, работая над действиями и редукторами, которые будут расположены в каталоге магазина.

touch src/store/actions.js
touch src/store/reducers.js

Во-первых, я определим мои действия. Это приложение не имеет очень много ради простоты и демонстрации.

SRC/Store/Actions.js
export const ADD = 'ADD';
export const SUBTRACT = 'SUBTRACT';

Далее я создаю функцию редуктора, необходимой для магазина.

SRC/Store/Reeders.js
import * as actionType from './actions';
const initialState = {
    counter: 0
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case actionType.ADD:
            return {
                ...state,
                counter: state.counter + 1
            }
        case actionType.SUBTRACT:
            return {
                ...state,
                counter: state.counter - 1
            }
        default:
            return state
    }
}
export default reducer;

В приведенном выше фрагменте кода я импортировал все действия из Actions.js Затем создал переменную состояния для инициализации состояния для этого редуктора и создал мою функцию редуктора. Функция редуктора принимает два аргумента Государство , который если не инициализирован, будет установлен на инициал и Действие который будет передан после отправки действия. Я буду использовать состояние переключения, чтобы определить тип действия и использование действий из Actions.js обрабатывать каждый случай соответственно.

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

SRC/index.js.
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './store/reducers';
import './index.css';
import App from './App';

const store = createStore(reducer);

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

В index.js Файл I импортировал Createstore от redux, а также Провайдер от React-redux. Я также импортировал мои редукторы, которые мне понадобится для моей функции Createstore. Функция Createstore принимает редукторы и возвращает магазин redux. Я использую провайдер, который имеет rop под названием магазин И я передаю магазин, созданный выше для опоры поставщика. В этот момент магазин redux доступен в течение всего приложения React.

Далее я создам два компонента, чтобы представлять счетчик приложения.

mkdir src/components/CounterButton
mkdir src/components/CounterLabel
touch src/components/CounterButton/CounterButton.js
touch src/components/CounterLabel/CounterLabel.js

Эти компоненты представляют собой презентационные компоненты, поэтому они будут очень простыми.

Counterbutton.js.
import React from 'react';
import './CounterButton.css';

function CounterButton(props) {
    return (
        

            
        

    )
}
export default CounterButton;
Counterlabel.js.
import React from 'react';

import './CounterLabel.css'

function CounterLabel(props) {
    return (
        

            {props.value}
        

    )
}

export default CounterLabel;

Далее я создаю счетчик счетчиков, который будет подключен к магазину Redux.

touch src/containers/Counter.js
Counter.js.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actionType from '../store/actions';
import CounterLabel from
    '../components/CounterLabel/CounterLabel';
import CounterButton from
    '../components/CounterButton/CounterButton';

import './Counter.css';

class Counter extends Component {
    render() {
        return (
            

                
                
                
            

        )
    }
}

const mapStateToProps = state => {
    return {
        ctr: state.counter
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onAdd: () => dispatch({ type: actionType.ADD }),
        onSubtract: () => dispatch({type: actionType.SUBTRACT})
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter);

В пределах Counter.js Я импортирую функцию Connect из React-redux Пакет, который используется непосредственно на компоненте в конце файла. Функция Connect принимает два аргумента, Первый MapStatetoPOOPs который несет ответственность за выбор части состояния, которое необходимому компоненту, а второй mapdispatchtopops который отвечает за диспетчерские действия в магазин. Онадд и Onsubtract Функции передаются как реквизиты для контрольныхbuttons и при нажатии отправляют свои соответствующие действия в магазин. На данный момент простые счетчики приложения завершены.

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

  1. Местное государство UI – Redux не рекомендуется
  2. Стойкое состояние – Redux можно использовать для данных, которые вам нужно отображать
  3. Государство клиента – посмотрите, чтобы использовать Redux

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

Оригинал: “https://dev.to/meddy672/react-redux-in-less-then-7-minutes-had”

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