Дзве базавыя ідэі ў Redux

Перш чым пачаць вывучэнне бібліятэкі Redux, давайце пазнаёмся з двума яе базавымі ідэямі. Першую ідэю, якая датычыцца кіравання станам, мы разгледзім на прыкладзе звычайнага лічыльніка на стэйце ў 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>
  )
}

У гэтым кодзе мы бачым стэйт для зменнай count - гэта крыніца ісціны для лічыльніка. Затым мы бачым дзеянне (action) - падзею, якая па кліку карыстальніка выклікае абнаўленне стэйту. І, нарэшце, прадстаўленне (view), з дапамогай якога мы адлюстроўваем карыстацкі інтэрфейс.

Такім чынам схема даволі простая: кнопка націскаецца - стэйт count (State) па націску (Action) змяняецца, следна змяняецца прадстаўленне (View) - у нашым выпадку гэта лік на экране.

Аднак, усё будзе складаней, калі ў нас мноства кампанентаў, якія павінны выкарыстоўваць адзін і той жа стэйт. Можна, вядома, напрыклад падняць стан да бацькоўскіх кампанентаў, але такое рашэнне не заўсёды можа пазбавіць ад праблемы. Redux у гэтым выпадку прапануе нам стварыць адно месца ў праграме, якое б утрымлівала глабальны стан і пэўныя шаблоны паводзін пры абнаўленні гэтага стану. Менавіта ў гэтым і заключаецца першая базавая ідэя (!).

Другая ідэя звязана з імутабельнасцю, гэта значыць з нязменнасцю даных. Вы, вядома, памятаеце з JavaScript, што масівы і аб'екты можна змяняць. Змяненне даных непасрэдна ў Redux, як і ў іншых фрэймворках лічыцца дрэнным тонам і можа прыводзіць да непрадказальных наступстваў. Таму ў Redux нашы першапачатковыя аб'екты і масівы павінны заставацца імутабельнымі, а змяняць мы можам толькі іх копіі.