Introducció a Redux

Redux és una biblioteca de gestió de l'estat per a aplicacions JavaScript, sovint utilitzada amb React. Proporciona una manera previsible de gestionar l'estat de l'aplicació, facilitant el desenvolupament d'aplicacions que es comporten de manera consistent, poden ser testejades fàcilment i funcionen en diferents entorns (client, servidor, natiu, etc.).

Conceptes clau de Redux

Store: L'emmagatzematge centralitzat de l'estat de l'aplicació.
Actions: Objectes que descriuen el que ha passat.
Reducers: Funcions pures que especifiquen com canvia l'estat de l'aplicació en resposta a una acció.
Dispatch: Mètode per enviar accions al store.
Selectors: Funcions per obtenir dades de l'estat.

Configuració de Redux

Instal·lació

Per començar a utilitzar Redux amb React, necessitem instal·lar les biblioteques redux i react-redux.

npm install redux react-redux

Creació del Store

El primer pas és crear el store de Redux. El store és l'objecte que conté l'estat de l'aplicació.

// src/store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

Creació del Reducer

Els reducers són funcions pures que prenen l'estat actual i una acció, i retornen un nou estat.

// src/reducers/index.js
const initialState = {
  count: 0
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

export default rootReducer;

Proveir el Store a l'Aplicació

Utilitzem el component Provider de react-redux per proveir el store a l'aplicació.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Connectar Components a Redux

Per connectar un component a Redux, utilitzem la funció connect de react-redux.

// src/components/Counter.js
import React from 'react';
import { connect } from 'react-redux';

function Counter({ count, increment, decrement }) {
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

const mapStateToProps = (state) => ({
  count: state.count
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Exercicis Pràctics

Exercici 1: Crear una acció personalitzada

Descripció: Crea una nova acció que reseteja el comptador a zero.
Passos:
- Afegeix un nou cas al reducer per gestionar l'acció RESET.
- Afegeix un nou botó al component Counter que despatxa l'acció RESET.

Solució

// src/reducers/index.js
const initialState = {
  count: 0
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'RESET':
      return { ...state, count: 0 };
    default:
      return state;
  }
}

export default rootReducer;

// src/components/Counter.js
import React from 'react';
import { connect } from 'react-redux';

function Counter({ count, increment, decrement, reset }) {
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

const mapStateToProps = (state) => ({
  count: state.count
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' }),
  reset: () => dispatch({ type: 'RESET' })
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Conclusió

En aquesta secció, hem après els conceptes bàsics de Redux i com configurar-lo en una aplicació React. Hem creat un store, un reducer, i hem connectat un component a Redux. A més, hem practicat la creació d'una acció personalitzada. En el proper mòdul, explorarem més a fons les accions i els reductors, i veurem com gestionar estats més complexos.

Redux: Introducció i configuració

Introducció a Redux

Conceptes clau de Redux

Configuració de Redux

Instal·lació

Creació del Store

Creació del Reducer

Proveir el Store a l'Aplicació

Connectar Components a Redux

Exercicis Pràctics

Exercici 1: Crear una acció personalitzada

Solució

Conclusió

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa