Duas ideias básicas no Redux

Antes de começar a aprender a biblioteca Redux, vamos nos familiarizar com suas duas ideias fundamentais. A primeira ideia, relacionada à gestão de estado, vamos examinar usando o exemplo de um contador comum com estado no 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>
  )
}

Neste código, vemos o estado para a variável count - esta é a fonte da verdade para o contador. Em seguida, vemos a ação (action) - um evento, que ao clicar do usuário aciona uma atualização do estado. E, finalmente, a visualização (view), com a qual exibimos a interface do usuário.

Portanto, o esquema é bastante simples: o botão é pressionado - o estado count (State) ao ser pressionado (Action) é alterado, consequentemente a visualização (View) muda - no nosso caso, é o número na tela.

No entanto, tudo fica mais complicado se temos muitos componentes que precisam usar o mesmo estado. Claro, é possível, por exemplo, elevar o estado aos componentes pai, mas essa solução nem sempre pode resolver o problema. O Redux, nesse caso, nos oferece criar um único local no aplicativo, que conteria o estado global e certos padrões de comportamento ao atualizar esse estado. É nisso que consiste a primeira ideia fundamental (!).

A segunda ideia está relacionada à imutabilidade, ou seja, à invariabilidade dos dados. Você, certamente, se lembra do JavaScript, que arrays e objetos podem ser alterados. Alterar dados diretamente no Redux, assim como em outros frameworks, é considerado uma má prática e pode levar a consequências imprevisíveis. Portanto, no Redux, nossos objetos e arrays originais devem permanecer imutáveis, e só podemos alterar suas cópias.