Когда я должен добавить Redux в приложение React?

Ответ 1

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

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

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

Когда вы окажетесь в этой ситуации, вы можете (но не обязательно) использовать Redux для "извлечения" этой логики управления состоянием из компонентов верхнего уровня в отдельные функции, называемые "редукторы", и "соединить" листовые компоненты которые заботятся об этом состоянии непосредственно к нему, а не передают реквизит через все приложение. Если у вас еще нет этой проблемы, вам, вероятно, не нужен Redux.

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

(Этот ответ вдохновлен руководством Pete Hunts react-howto, я также предлагаю вам прочитать его.)

Ответ 2

Я обнаружил, что идеальный путь для добавления Redux в приложение/стек - это ждать, пока после вы/приложение/команда не почувствуете боли, которые он решает. После того, как вы начнете видеть длинные цепочки props, которые собираются и передаются через несколько уровней компонентов, или вы обнаруживаете, что вы организовываете сложные манипуляции/чтения состояний, это может быть признаком того, что ваше приложение может извлечь выгоду из внедрения Redux и др.

Я рекомендую принять приложение, которое вы уже создали с помощью "just React", и посмотреть, как Redux может в него вписаться. Посмотрите, можете ли вы изящно ввести его, вырвав одно кусочек состояния или множество "действий" за раз. Рефакторинг к нему, не повесившись на большой переделке вашего приложения. Если вам все еще не удается увидеть, где это может добавить ценность, это может быть признаком того, что ваше приложение либо не является большим, либо сложным, чтобы заслужить что-то вроде Redux поверх React.

Если вы еще не сталкивались с этим, у Дэна (см. выше) есть серия коротких видеороликов, которая проходит через Redux на более фундаментальном уровне. Я настоятельно рекомендую потратить некоторое время на поглощение его частей: https://egghead.io/series/getting-started-with-redux

В Redux также есть довольно красивые документы. Особенно объясняя много "почему", таких как http://redux.js.org/docs/introduction/ThreePrinciples.html

Ответ 3

Я подготовил этот документ, чтобы понять Redux. Надеюсь, это очистит ваши сомнения.

-------------------------- РУКОВОДСТВО ПО REDUX ----------------------

ACTIONS- Действия - это полезные данные, которые отправляют данные из вашего приложения в магазин. Они являются единственным источником информации из магазина. Вы можете отправить их только с помощью store.dispatch().

   Example-
const  ADD_TODO = 'ADD_TODO'

{
   type:ADD_TODO,
   text: 'Build my first redux app'
}

Действия являются простым объектом javascript. Действие должно иметь свойство [type], указывающее тип выполняемого действия. Тип должен быть определен как строковая константа.

ДЕЙСТВИЕ CREAToRS----- ---------------- ---- Создатели действий - это именно та функция, которая создает действие. Термины - создатель действия и действия легко сопоставить. В избыточном действии создатель возвращает действие.

function addToDo(text) {
   return {
    type: ADD_TODO,
    text    
   }
}

для инициализации отправки передайте результат в функцию dispatch().

1. отправка (addToDo (текст));
2. отправка (completeToDo (индекс))

Кроме того, вы можете создать создателя связанных действий, который автоматически отправляет.

cosnt boundAddTodO = text => dispatch(addToDo(text));

теперь вы можете напрямую позвонить

boundaddTodO(text);

Функция dispatch() доступна напрямую из store.dispatch(). но мы получаем к нему доступ, используя вспомогательный метод connect().

Actions.js.....................

Действия...........

exports cosnt ADD_TODO = 'ADD_TODO';
exports cosnt TOGGLE_TODO = 'TOGGLE_TODO'

Создатели действий

функция экспорта addToDO (текст) {return {тип: ADD_TODO, текст}}

......................... РЕДУКТОРЫ..................................

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

Разработка государственного ша

В редуксе все состояние приложения хранится в одном объекте. Вы должны хранить некоторые данные, а также некоторые состояния.

{visibilityFilter: 'SHOW_ALL', задачи: [{text: 'Рассмотреть возможность использования избыточного кода', завершено: true}, {text: 'Сохранить все состояния в одном дереве'}]}

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

(previousState, action) => newState

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

import  { visiblilityFilters } from './actions';
const initialState = {
    visibilityFilter: VisibilityFilters.SHOW_ALL,
    todo: []
}

function todoApp(state, action){
    if(typeof state == 'undefined'){
        return initialState;
    }

    // dont handle other cases as of now.
    return state;
}

вы можете сделать то же самое, используя ES6 способ обработки JS

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

................................. ХРАНИТЬ...................................

Магазин - это объект, который объединяет их. магазин имеет следующую ответственность

1. удерживать состояние приложения
2. разрешить доступ к состоянию через getState()
3. Разрешить обновление состояния через dispatch()
4. Регистрация listerneres через suscriber (слушатель)

Заметка. используйте функциюlateReducers() для объединения нескольких редукторов в один.

const store = createStore (todoapp); //todoapp - это редукторы

Ответ 4

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

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

Посмотрите на это изображение, чтобы понять, что делает Redux с первого взгляда:

Также, как Redux представляет себя:

Redux - это предсказуемый контейнер состояний для приложений JavaScript.

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

Вы можете использовать Redux вместе с React или с любой другой библиотекой представлений. Это крошечный (2kB, включая зависимости).

Также в соответствии с документацией для Redux существуют три принципа:

1. Единственный источник истины

2. Состояние доступно только для чтения

3. Изменения производятся с помощью чистых функций

Таким образом, в основном, когда вам нужно в одном магазине отслеживать все, что вам нравится в вашем приложении, тогда Redux удобен, вы можете получить к нему доступ в любом месте вашего приложения в любом маршруте... просто используя store.getState();

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

Просто, если ваше приложение будет большим, со многими компонентами, состояниями и маршрутизацией, попытайтесь реализовать Redux с самого начала! Это поможет вам на этом пути!

Ответ 5

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

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

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

Понятие редукса можно объяснить на следующем рисунке.

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

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

Ответ 6

Вот как работает Redux. Действие отправляется из любого компонента или представления. Действие ДОЛЖНО иметь свойство "тип" и может быть любым свойством, которое содержит информацию о произошедшем действии. Данные, передаваемые в действии, могут относиться к другому редуктору, поэтому один и тот же объект передается другому редуктору. Каждый редуктор принимает/оформляет свою часть/вклад в состояние. Затем выходные данные объединяются, и формируется новое состояние, и компонент, который должен быть подписан на событие изменения состояния, получает уведомление.

В приведенном выше примере, коричневый цвет имеет все 3 компонента RGB. Каждый редуктор получает одинаковый коричневый цвет, и они отделяют свой вклад в цвет.

Ответ 7

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

• если вы хотите отобразить значение в ваших компонентах, скажем, имя или что-то, что мы обычно получаем значение из состояния
• И мы получаем его, используя this.state.value.
• Что делать, если вы хотите сохранить значение во многих компонентах, здесь приходит редукция.
• Это что-то стоит на вершине всего, что будет иметь государственные ценности. Из этого будет получен каждый компонент, который нуждается в соответствующем значении.

Ответ 8

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