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:

function 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.

Conte em que consiste a primeira ideia fundamental do Redux.

Conte em que consiste a segunda ideia fundamental do Redux.