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

HOME

Introducció a Redux

Redux és una llibreria de gestió d'estat per a aplicacions JavaScript, especialment útil quan es treballa amb frameworks com React. Proporciona una manera previsible de gestionar l'estat de l'aplicació amb un únic "store" centralitzat.

Conceptes Clau de Redux

Store: L'únic lloc on es guarda l'estat de l'aplicació.
Actions: Objectes que descriuen el que ha passat. Tenen un tipus i, opcionalment, una càrrega de dades.
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 del store.

Instal·lació de Redux

Per començar a utilitzar Redux en una aplicació React, primer cal instal·lar les dependències necessàries:

npm install redux react-redux

Creació del Store

El store és l'únic lloc on es guarda l'estat de l'aplicació. Es crea utilitzant la funció createStore de Redux.

import { createStore } from 'redux';

// Un reducer simple
const initialState = { count: 0 };

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

// Creació del store
const store = createStore(counterReducer);

Accions

Les accions són objectes que descriuen el que ha passat a l'aplicació. Tenen un tipus i, opcionalment, una càrrega de dades.

const incrementAction = { type: 'INCREMENT' };
const decrementAction = { type: 'DECREMENT' };

Dispatching Accions

Per enviar una acció al store, utilitzem el mètode dispatch.

store.dispatch(incrementAction);
store.dispatch(decrementAction);

Connectar Redux amb React

Per connectar Redux amb React, utilitzem el paquet react-redux. El component Provider fa que el store estigui disponible per a tots els components de l'aplicació.

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

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

Utilitzar Redux en Components React

Per utilitzar l'estat de Redux en components React, utilitzem els hooks useSelector i useDispatch de react-redux.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

export default Counter;

Exercicis Pràctics

Exercici 1: Crear un Reducer

Crea un reducer que gestioni l'estat d'una llista de tasques. Les accions haurien de permetre afegir una tasca, eliminar una tasca i marcar una tasca com a completada.

Solució

const initialState = {
  tasks: []
};

function tasksReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TASK':
      return {
        ...state,
        tasks: [...state.tasks, action.payload]
      };
    case 'REMOVE_TASK':
      return {
        ...state,
        tasks: state.tasks.filter(task => task.id !== action.payload.id)
      };
    case 'TOGGLE_TASK':
      return {
        ...state,
        tasks: state.tasks.map(task =>
          task.id === action.payload.id ? { ...task, completed: !task.completed } : task
        )
      };
    default:
      return state;
  }
}

Exercici 2: Connectar el Reducer a un Component

Crea un component React que permeti afegir, eliminar i marcar tasques com a completades utilitzant el reducer creat a l'exercici anterior.

Solució

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const TaskList = () => {
  const tasks = useSelector((state) => state.tasks);
  const dispatch = useDispatch();
  const [taskText, setTaskText] = useState('');

  const addTask = () => {
    dispatch({ type: 'ADD_TASK', payload: { id: Date.now(), text: taskText, completed: false } });
    setTaskText('');
  };

  const removeTask = (id) => {
    dispatch({ type: 'REMOVE_TASK', payload: { id } });
  };

  const toggleTask = (id) => {
    dispatch({ type: 'TOGGLE_TASK', payload: { id } });
  };

  return (
    <div>
      <input
        type="text"
        value={taskText}
        onChange={(e) => setTaskText(e.target.value)}
      />
      <button onClick={addTask}>Add Task</button>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <span
              style={{ textDecoration: task.completed ? 'line-through' : 'none' }}
              onClick={() => toggleTask(task.id)}
            >
              {task.text}
            </span>
            <button onClick={() => removeTask(task.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TaskList;

Resum

En aquesta secció, hem après els conceptes bàsics de Redux, com crear un store, definir accions i reducers, i connectar Redux amb React. També hem vist com utilitzar els hooks useSelector i useDispatch per interactuar amb l'estat de Redux des de components React. Els exercicis pràctics ens han ajudat a consolidar aquests conceptes. En el següent mòdul, explorarem altres aspectes avançats de Redux, com la gestió de middleware i la integració amb altres eines.

Gestió d'Estat amb Redux

Introducció a Redux

Conceptes Clau de Redux

Instal·lació de Redux

Creació del Store

Accions

Dispatching Accions

Connectar Redux amb React

Utilitzar Redux en Components React

Exercicis Pràctics

Exercici 1: Crear un Reducer

Solució

Exercici 2: Connectar el Reducer a un Component

Solució

Resum

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final