Интеграция Redux в ваше приложение React — пошаговое руководство

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

Прежде всего, давайте начнем с установки библиотек «redux» и «react-redux» через npm или yarn.

npm install redux react-redux

или

yarn add redux react-redux

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

После установки библиотек мы создадим новый каталог с именем «store» в корневом каталоге нашего проекта. Внутри «магазина» мы создадим три новых файла: «actions.js», «reducers.js» и «index.js».

В «actions.js» мы определим действия нашего приложения. Действие — это объект, описывающий изменение состояния приложения. Например, у нас может быть действие "addTodo", которое добавляет новый элемент списка дел в состояние приложения.

export const addTodo = (text) => {
    return {
        type: 'ADD_TODO',
        text: text
    }
}

Действия — это единственный способ изменить состояние хранилища, и они должны иметь свойство «тип», определяющее тип выполняемого действия.

Далее в «reducers.js» мы определим редьюсеры нашего приложения. Редьюсер — это функция, которая принимает текущее состояние и действие и возвращает следующее состояние.

const initialState = {
    todos: []
}

export const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                todos: [...state.todos, { text: action.text }]
            }
        default:
            return state;
    }
}

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

В «index.js» мы создадим новый магазин, используя функцию «createStore» из библиотеки «redux». Мы передадим наш редьюсер верхнего уровня в качестве первого аргумента.

import { createStore } from 'redux'
import { todoReducer } from './reducers'

const store = createStore(todoReducer)

Хранилище — это единственный источник достоверной информации о состоянии нашего приложения, где хранится состояние, а для его обновления отправляются действия.

В нашем корневом компоненте мы будем использовать компонент «Provider» из библиотеки «react-redux», чтобы обернуть наше дерево компонентов. Мы передадим магазин, созданный на предыдущем шаге, в качестве реквизита.

import { Provider } from 'react-redux'

const Root = () => {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
}

Это позволяет всем дочерним компонентам иметь доступ к хранилищу и доступ к действиям состояния и отправки.

Теперь перейдем к подключению наших компонентов к хранилищу. Для этого воспользуемся функцией «connect» из библиотеки «react-redux». Эта функция принимает два аргумента: функцию mapStateToProps и функцию mapDispatchToProps.

Функция mapStateToProps сопоставляет состояние хранилища с реквизитами нашего компонента. Эта функция принимает состояние в качестве аргумента и возвращает объект, который будет передан компоненту в качестве реквизита. Например, если мы хотим передать массив todos из состояния в наш компонент TodoList в качестве реквизита, мы можем написать функцию mapStateToProps следующим образом:

const mapStateToProps = (state) => {
    return {
        todos: state.todos
    }
}

Функция mapDispatchToProps сопоставляет метод отправки магазина со свойствами нашего компонента. Эта функция принимает метод отправки в качестве аргумента и возвращает объект, который будет передан компоненту в качестве реквизита. Например, если мы хотим передать действие addTodo в качестве реквизита нашему компоненту TodoForm, мы можем написать функцию mapDispatchToProps следующим образом:

import { addTodo } from './actions'

const mapDispatchToProps = (dispatch) => {
    return {
        addTodo: (text) => dispatch(addTodo(text))
    }
}

Наконец, мы воспользуемся функцией подключения для подключения нашего компонента к хранилищу и передадим функции mapStateToProps и mapDispatchToProps в качестве аргументов.

import { connect } from 'react-redux'

const TodoList = (props) => {
    return (
        // TodoList component code
    )
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

Выполнив эти шаги, наш компонент TodoList теперь будет иметь доступ к массиву todos из состояния в качестве реквизита и к действию addTodo в качестве реквизита. Теперь мы можем использовать эти реквизиты в нашем компоненте для отображения задач и добавления новых задач в состояние.

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

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

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