Две основни идеи в Redux

Преди да започнем изучаването на библиотеката Redux, нека се запознаем с двете й основни идеи. Първата идея, касаеща управлението на състоянието, ще разгледаме с примера на обикновен брояч със state в React:

jsxfunction Counter() {
  // State
  const [count, setCount] = useState(0)

  // Action:
  function clickHandler() {
    setCount(count + 1)
  }

  // View:
  return (
    <div>
      <span>{count}</span>
      <button onClick={clickHandler}>+</button>
    </div>
  )
}

В този код виждаме state за променливата count - това е източникът на истина за брояча. След това виждаме действие (action) - събитие, което при клик на потребителя причинява актуализация на state. И накрая, представяне (view), с което показваме потребителския интерфейс.

По този начин схемата е доста проста: бутонът се натиска - state count (State) при натискане (Action) се променя, следователно се променя представянето (View) - в нашия случай това е числото на екрана.

Въпреки това, всичко ще бъде по-сложно, ако имаме множество компоненти, които трябва да използват едно и също state. Може, разбира се, например да издигнем state нагоре до родителски компоненти, но такова решение не винаги може да реши проблема. Redux в този случай ни предлага да създадем едно място в приложението, което да съдържа глобалното състояние и определени модели на поведение при актуализиране на това състояние. Exactly in this и се състои първата основна идея (!).

Втората идея е свързана с имютабилност, тоест с неизменността на данните. Вие, разбира се, помните от JavaScript, че масиви и обекти могат да се променят. Промяната на данни директно в Redux, както и в други frameworks се счита за лош тон и може да доведе до непредсказуеми последствия. Затова в Redux нашите първоначални обекти и масиви трябва да останат имютабилни, а променять можем само техни копия.