Redux в двух словах: (почти) комедийное руководство по пересмотру для веб-разработчиков

Привет, веб-любители! 🚀 Вы когда-нибудь оказывались в беспорядке проблем управления государством? Не бойтесь, Redux, государственный ниндзя, здесь, чтобы помочь. И не волнуйтесь, это не будет редукцией документов Redux. (Видите, что я там сделал? 😜)

1. Основной принцип

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

2. Три мушкетера Redux

а. Действия: Дикторы 📣

Это просто объекты JavaScript, описывающие «что произошло».

{
  type: 'ADD_TODO',
  text: 'Learn Redux'
}

б. Редьюсеры: Менеджеры 💼

Чистые функции, диктующие, «как изменяется состояние».

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.text]
    default:
      return state
  }
}

в. Магазин: The Grand Repository 📦

Содержит состояние вашего приложения и отправляет действия.

import { createStore } from 'redux';
const store = createStore(todos, ['Use Redux']);

3. Освоение промежуточного программного обеспечения

Это как вышибала возле ночного клуба. Проверка действий до того, как они дойдут до редукторной стороны. Общий? redux-thunk позволяет отправлять функции (а не только объекты).

4. Соединение Redux с React

react-redux это клей. Обеспечивает Provider и connect!

• Поставщик: охватывает ваше приложение React, обеспечивая доступ каждого компонента к хранилищу.
• connect: как пуповина для вашего компонента. Подает состояние и отправляет действия.

import { connect } from 'react-redux';
const mapStateToProps = state => ({ todos: state.todos });
const mapDispatchToProps = dispatch => ({ addTodo: text => dispatch(addTodo(text)) });
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);

5. Преимущества производительности

• Непротиворечивое состояние: один источник правды — больше никаких зануд!
• Оптимизация. Используя такие инструменты, как Reselect, вы можете эффективно извлекать данные из хранилища Redux.

6. Redux DevTools: Спаситель

Проверяйте состояние, отслеживайте изменения и отлаживайте во времени. Да, вы не ослышались — путешествие во времени!

const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

7. Будущее?

В то время как Redux является королем для больших приложений, контекстный API React и новые инструменты встряхивают ситуацию! В курсе!

Хорошо, начинающий Reduxian, вот оно. Небольшой ускоренный курс по Redux. Погрузитесь глубже, если вы жаждете; горшок для супа Redux большой и ароматный.

Теперь, если вы нашли это проницательным, дайте мне крик в мой Медиум, Твиттер или LinkedIn. Или просто поделитесь им с другими странствующими душами в мире веб-разработки! 🌐 Будьте здоровы и продолжайте работу над кодом! 🍻🖥️