El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, explorarem dos conceptes fonamentals de Redux: les accions i els reductors. Aquests elements són essencials per gestionar l'estat de l'aplicació de manera previsible i estructurada.

Què són les accions?

Les accions són objectes JavaScript que contenen informació sobre un esdeveniment que ha ocorregut i que pot canviar l'estat de l'aplicació. Cada acció ha de tenir una propietat type que descrigui el tipus d'esdeveniment, i pot tenir altres propietats que proporcionin informació addicional necessària per actualitzar l'estat.

Exemple d'una acció

const addTodoAction = {
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Aprendre Redux'
  }
};

En aquest exemple, l'acció addTodoAction té un tipus ADD_TODO i un payload que conté les dades necessàries per afegir una nova tasca.

Creadores d'accions

Les creadores d'accions són funcions que creen i retornen accions. Són útils per evitar la duplicació de codi i per fer que el codi sigui més llegible i mantenible.

function addTodoActionCreator(id, text) {
  return {
    type: 'ADD_TODO',
    payload: {
      id,
      text
    }
  };
}

// Ús de la creadora d'accions
const action = addTodoActionCreator(1, 'Aprendre Redux');

Què són els reductors?

Els reductors són funcions pures que prenen l'estat actual i una acció com a arguments, i retornen un nou estat. Els reductors especifiquen com l'estat de l'aplicació ha de canviar en resposta a una acció.

Exemple d'un reductor

const initialState = {
  todos: []
};

function todoReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    default:
      return state;
  }
}

En aquest exemple, el reductor todoReducer gestiona l'estat de les tasques (todos). Quan rep una acció de tipus ADD_TODO, afegeix una nova tasca a la llista de tasques.

Integració d'accions i reductors amb Redux

Per utilitzar accions i reductors amb Redux, primer hem de crear un store que emmagatzemi l'estat de l'aplicació. Utilitzarem la funció createStore de Redux per fer-ho.

Exemple complet

import { createStore } from 'redux';

// Estat inicial
const initialState = {
  todos: []
};

// Reductor
function todoReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    default:
      return state;
  }
}

// Crear el store
const store = createStore(todoReducer);

// Crear una acció
const addTodoAction = {
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Aprendre Redux'
  }
};

// Despatxar l'acció
store.dispatch(addTodoAction);

// Obtenir l'estat actualitzat
console.log(store.getState());

En aquest exemple, hem creat un store amb el reductor todoReducer, hem creat una acció addTodoAction i l'hem despatxat al store. Finalment, hem obtingut l'estat actualitzat del store.

Exercicis pràctics

Exercici 1: Crear una acció i un reductor

Crea una acció REMOVE_TODO que elimini una tasca per id.
Modifica el reductor todoReducer per gestionar l'acció REMOVE_TODO.

Solució

// Acció REMOVE_TODO
const removeTodoAction = {
  type: 'REMOVE_TODO',
  payload: {
    id: 1
  }
};

// Modificar el reductor
function todoReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    case 'REMOVE_TODO':
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.payload.id)
      };
    default:
      return state;
  }
}

Exercici 2: Crear una creadora d'accions

Crea una creadora d'accions removeTodoActionCreator que prengui un id com a argument i retorni una acció REMOVE_TODO.

Solució

function removeTodoActionCreator(id) {
  return {
    type: 'REMOVE_TODO',
    payload: {
      id
    }
  };
}

// Ús de la creadora d'accions
const action = removeTodoActionCreator(1);

Conclusió

En aquesta secció, hem après què són les accions i els reductors en Redux, com crear-los i com integrar-los amb el store de Redux. També hem practicat la creació d'accions i reductors amb exercicis pràctics. Amb aquests coneixements, estem preparats per gestionar l'estat de les nostres aplicacions de manera més eficient i estructurada.

Redux: Accions i reductors

Què són les accions?

Exemple d'una acció

Creadores d'accions

Què són els reductors?

Exemple d'un reductor

Integració d'accions i reductors amb Redux

Exemple complet

Exercicis pràctics

Exercici 1: Crear una acció i un reductor

Solució

Exercici 2: Crear una creadora d'accions

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