Две базовые ideas en Redux

Antes de comenzar a estudiar la biblioteca Redux, familiaricémonos con sus dos ideas básicas. La primera idea, relacionada con la gestión del estado, la examinaremos mediante el ejemplo de un contador ordinario utilizando el estado en 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>
	)
}

En este código vemos el estado para la variable count - esta es la fuente de la verdad para el contador. Luego vemos una acción (action) - un evento, que al hacer clic el usuario provoca una actualización del estado. Y, finalmente, la vista (view), mediante la cual mostramos la interfaz de usuario.

Así que el esquema es bastante simple: se presiona el botón - el estado count (State) al presionar (Action) cambia, por consiguiente cambia la vista (View) - en nuestro caso es el número en la pantalla.

Sin embargo, todo se complicará si tenemos muchos componentes que deben utilizar un mismo estado. Se puede, por ejemplo, elevar el estado a componentes padres, pero esta solución no siempre puede resolver el problema. Redux en este caso nos propone crear un lugar único en la aplicación, que contenga el estado global y ciertos patrones de comportamiento al actualizar este estado. Precisamente en esto consiste la primera idea básica (!).

La segunda idea está relacionada con la inmutabilidad, es decir, con la inalterabilidad de los datos. Por supuesto, recuerdas de JavaScript que los arrays y objetos se pueden modificar. Modificar datos directamente en Redux, al igual que en otros frameworks, se considera una mala práctica y puede conducir a consecuencias impredecibles. Por lo tanto, en Redux nuestros objetos y arrays originales deben permanecer inmutables, y solo podemos modificar sus copias.

Explica en qué consiste la primera idea básica de Redux.

Explica en qué consiste la segunda idea básica de Redux.