Коли слід додавати Redux до програми React?

Зараз я вивчаю React і намагаюся зрозуміти, як використовувати його з Redux для створення мобільного додатка. Я трохи заплутався у тому, як вони пов’язані / використовуються разом. Наприклад, я завершив цей підручник у React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript , але зараз я хочу пограти з додаванням деяких редукторів / дій до цього додатка та Я не впевнений, де ті зв'язатимуться з тим, що я вже зробив.

React - це структура інтерфейсу користувача, яка опікується оновленням інтерфейсу у відповідь на «джерело істини», яке зазвичай описується як стан, що «належить» певному компоненту. Мислення в React дуже добре описує концепцію державної власності React, і я настійно рекомендую вам пройти через це.

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

Однак іноді віддалені частини програми хочуть мати доступ до того самого стану, наприклад, якщо ви кешуєте отримані дані та хочете постійно їх оновлювати скрізь одночасно. У цьому випадку, якщо ви будете слідувати моделі React, ви отримаєте купу дуже великих компонентів у верхній частині дерева компонентів, які передають незліченну кількість реквізиту через деякі проміжні компоненти, які їх не використовують, просто для того, щоб охопити кілька компонентів листя, які насправді піклуються про ці дані.

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

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

(Ця відповідь натхненна керівництвом Піта Ханта щодо реакції , я пропоную вам також прочитати його.)

Я виявив , що ідеальний шлях для додавання 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

Я підготував цей документ, щоб зрозуміти Redux. Сподіваюся, це змусить ваші сумніви.

-------------------------- Підручник зі скорочення ----------------------

ДІЇ - Дії - це корисне навантаження інформації, яка надсилає дані з вашої програми до магазину. Вони є єдиним джерелом інформації з магазину. Ви можете надіслати їх лише за допомогою store.dispatch ().

   Example-
const  ADD_TODO = 'ADD_TODO'

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

Дії - це звичайний об'єкт JavaScript. Дія повинна мати властивість [type], що вказує на тип дії, що виконується. Тип слід визначати як рядкову константу.

СТВОРЕННЯ ДІЙ ----- ---------------- ---- Творці дій - це саме та функція, яка створює дію Легко поєднати між собою терміни - творець дії та дії. У дії redux, творець повертає дію.

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 ().

Дії.js .....................

Дії ...........

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

Дії Творці

функція експорту addToDO (text) {return {type: ADD_TODO, text}}

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

Редуктори вказують, як змінюється стан програм у відповідь на дії, що надсилаються в магазин.

Проектування державного фігури

У redux весь стан програми зберігається в одному об'єкті. Ви повинні зберігати деякі дані, а також деякий стан.

{visibilityFilter: 'SHOW_ALL', todos: [{text: 'Розгляньте можливість використання redux', complete: true}, {text: 'Kepp весь стан в одному дереві'}]}

Обробка дій ---------------- редуктори - це чисті функції, які виконують попередній стан і дію і повертають новий стан.

(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. Дозволити оновлення стану за допомогою диспетчеризації ()
4. Зареєструйте слухачів через слухача (слухача)

Примітка. використовуйте combReducers (), щоб об’єднати кілька редукторів в один.

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

По-перше, вам не потрібно додавати Reduxдо своєї програми, якщо вона вам не потрібна! Просто, тому не змушуйте себе включати його у свій проект, якщо це вам зовсім не потрібно! Але це не означає, що Redux поганий, він справді корисний у великих додатках, тому читайте далі ...

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

Подивіться на це зображення, щоб зрозуміти, що спочатку робить Redux:

Також ось як Redux представляється:

Redux - це передбачуваний контейнер стану для програм JavaScript.

Це допомагає писати програми, які поводяться послідовно, працюють в різних середовищах (клієнтських, серверних та власних) і легко тестуються. Крім того, це забезпечує чудовий досвід для розробників, наприклад, редагування коду в реальному часі в поєднанні з налагоджувачем часу.

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

Також згідно з документацією, є три принципи, Reduxяк зазначено нижче:

1. Єдине джерело істини

2. Держава доступна лише для читання

3. Зміни вносяться за допомогою чистих функцій

Отже, в основному, коли вам потрібно в одному магазині, щоб відстежувати все, що вам подобається у вашому додатку, тоді Redux зручний, ви можете отримати до нього доступ у будь-якій точці вашого додатка, будь-яким маршрутом ... просто використовуючи store.getState();

Також, використовуючи проміжне програмне забезпечення Redux, ви можете набагато краще керувати станом, на офіційній сторінці Redux є список корисних компонентів та проміжного програмного забезпечення!

Просто якщо ваш додаток буде великим, з багатьма компонентами, станами та маршрутизацією, спробуйте реалізувати Redux з самого початку! Це вам точно допоможе в дорозі!

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

Але в міру зростання додатків стає важко керувати станами та перетвореннями станів. Перетворення стану та стану потрібно правильно відстежувати для налагодження програм.

Redux - це передбачуваний контейнер стану для програм JavaScript, який управляє перетвореннями стану і стану і часто використовується з React,

Поняття редуксу можна пояснити на наступному зображенні.

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

Оскільки держава управляється глобально і за допомогою redux, її легше підтримувати.

Ось як працює редукс. Дія надсилається з будь-якого компонента чи виду. Дія ПОВИННА мати властивість "type" і може бути будь-якою властивістю, що містить інформацію про подію, що сталася. Дані, передані в дії, можуть мати відношення до різного редуктора, тому один і той же об'єкт передається до іншого редуктора. Кожен редуктор бере / оформляє свою частину / внесок у стан. Потім вихідні дані об'єднуються і формується новий стан, а компонент, який повинен бути підписаний на подію зміни стану, отримує повідомлення.

У наведеному вище прикладі коричневий колір має всі 3-компонентні RGB. Кожен редуктор отримує однаковий коричневий колір, і вони відокремлюють його внесок у колір.

Використовуючи Redux і особисто вважаючи його громіздким, я виявив, що передача об'єкта до моїх компонентів, оскільки prop може бути набагато простішим способом підтримувати стан. Не кажучи вже про те, що це простий спосіб зробити посилання на функції для виклику в інших компонентах. Це може вирішити багато громіздких питань передачі повідомлень між компонентами в React, тому це два за одного.