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

HOME

En aquest tema, aprendrem com connectar Redux amb una aplicació React per gestionar l'estat de manera eficient. Redux és una llibreria de gestió de l'estat previsible per a aplicacions JavaScript, i és especialment útil en aplicacions React per mantenir l'estat de l'aplicació de manera centralitzada.

Objectius

Comprendre com integrar Redux amb React.
Aprendre a utilitzar el Provider per proporcionar l'estat de Redux a l'aplicació.
Utilitzar el connect per connectar components React amb l'estat de Redux.
Implementar accions i reductors en una aplicació React.

Passos per connectar Redux amb React

Instal·lació de Redux i React-Redux

Primer, necessitem instal·lar les dependències necessàries:

npm install redux react-redux

Configuració del Store

El store és l'objecte que manté l'estat de l'aplicació. Crearem un store utilitzant el createStore de Redux.

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

const store = createStore(rootReducer);

export default store;

Proveir el Store a l'Aplicació

Utilitzarem el component Provider de react-redux per proporcionar el store a tota l'aplicació.

// index.js
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')
);

Crear Reductors

Els reductors són funcions pures que especifiquen com canvia l'estat de l'aplicació en resposta a una acció.

// reducers/index.js
import { combineReducers } from 'redux';
import counterReducer from './counterReducer';

const rootReducer = combineReducers({
  counter: counterReducer
});

export default rootReducer;

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

const counterReducer = (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 counterReducer;

Crear Accions

Les accions són objectes que descriuen un canvi en l'estat.

// actions/index.js
export const increment = () => {
  return {
    type: 'INCREMENT'
  };
};

export const decrement = () => {
  return {
    type: 'DECREMENT'
  };
};

Connectar Components amb Redux

Utilitzarem la funció connect de react-redux per connectar els components React amb l'estat de Redux.

// components/Counter.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from '../actions';

const 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.counter.count
});

const mapDispatchToProps = {
  increment,
  decrement
};

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

Utilitzar el Component Connectat

Finalment, utilitzarem el component connectat dins de la nostra aplicació.

// App.js
import React from 'react';
import Counter from './components/Counter';

const App = () => {
  return (
    <div>
      <h1>Redux Counter</h1>
      <Counter />
    </div>
  );
};

export default App;

Exercici Pràctic

Objectiu

Crear una aplicació de comptador que utilitzi Redux per gestionar l'estat.

Passos

Configura un nou projecte React.
Instal·la redux i react-redux.
Crea un store i proveeix-lo a l'aplicació.
Defineix reductors per gestionar l'estat del comptador.
Crea accions per incrementar i decrementar el comptador.
Connecta un component Counter amb l'estat de Redux.
Utilitza el component Counter dins de l'aplicació.

Solució

La solució es troba en els exemples de codi proporcionats anteriorment. Assegura't de seguir cada pas i verificar que l'aplicació funcioni correctament.

Errors Comuns i Consells

No oblidis proporcionar el store a l'aplicació: Si no utilitzes el Provider, els components no podran accedir a l'estat de Redux.
Assegura't que els noms de les accions coincideixin: Els noms de les accions en els reductors han de coincidir exactament amb els noms de les accions que dispatches.
Utilitza funcions pures en els reductors: Els reductors han de ser funcions pures, és a dir, no han de tenir efectes secundaris i han de retornar un nou estat en lloc de modificar l'estat existent.

Conclusió

En aquest tema, hem après com connectar Redux amb una aplicació React per gestionar l'estat de manera centralitzada. Hem vist com configurar el store, crear reductors i accions, i connectar components React amb l'estat de Redux. Amb aquests coneixements, estàs preparat per gestionar l'estat de les teves aplicacions React de manera més eficient i escalable.

Redux: Connexió amb React

Objectius

Passos per connectar Redux amb React

Instal·lació de Redux i React-Redux

Configuració del Store

Proveir el Store a l'Aplicació

Crear Reductors

Crear Accions

Connectar Components amb Redux

Utilitzar el Component Connectat

Exercici Pràctic

Objectiu

Passos

Solució

Errors Comuns i Consells

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