21. Integrando React con Redux

Tras los primeros pasos con Redux y entendido el ejemplo básico del contador, toca llevarse todo esto a React.

Así que construimos el mismo ejemplo del Counter basándonos en redux y aprovechando la creación de sinergias con react-redux. (Un reto sin emplear la palabra sinergia es menos reto)

En esta ocasión nuestras actions son iguales a las del ejemplo del día 19.

Casualmente también los reducers llevan el mismo camino.

¿Sorprendente?

No tanto, dado que ya habíamos comentado que redux no es react y que puede emplearse con cualquier librería de JavaScript que se quiera.

Lo que si tenemos ahora es un componente Counter donde reside toda la responsabilidad del contador.

class Counter extends Component {
  render() {
    const { count, onIncrement, onDecrement, onReset } = this.props;
    return (
      <div>
        {count}
        <br />
        <button onClick={onIncrement}>Increment</button>
        <button onClick={onDecrement}>Decrement</button>
        <button onClick={onReset}>Reset</button>
      </div>
    );
  }
}

Vemos que aparecen en el this.props unas props que no parecen muy normales. Esos eventos que comienzan por on vamos a ver en un momento de donde proceden.

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

En este caso connect es lo que realmente está conectando el componente de react y con el store de redux.

Es un HOC (High Order Component) que lanza sobre el componente Counter un par de funciones clave que por convenio tienen esos nombres.

Aquí van:

const mapStateToProps = state => {
  return { count: state };
};

Que no miente en su nombre, transforma el state en un props.

const mapDispatchToProps = dispatch => {
  return {
    onIncrement: () => dispatch(Action.increment()),
    onDecrement: () => dispatch(Action.decrement()),
    onReset: () => dispatch(Action.reset())
  };
};

Que enlaza las acciones con el store a través del dispatch. Esto es, conseguimos tener las funciones que se lanzan cuando hacemos click en los botones del contador relacionadas con el store, dejando en manos de redux y react la comunicación, actualización del estado y, sobre todo, la renderización .

Aguas arriba del componente, en el index.js nos queda la creación del store y la aparición del Provider como componente padre.

import { createStore } from "redux";
import { Provider } from "react-redux";
import Counter from "./components/Counter";
import counter from "./reducers";
const store = createStore(counter);
function App() {
  return (
    <div className="App">
      <Provider store={store}>
        <Counter />
      </Provider>
    </div>
  );
}

Explicado con más detalle en How does redux work.

El código lo tienes disponible en: