¿Cómo combinar múltiples reductores en ReactJS?

En ReactJs, cuando estamos trabajando con la herramienta de gestión de estado redux. Usamos acciones para realizar acciones y tenemos reductores para modificar y crear cambios en nuestro estado de redux. La mayoría de las veces tenemos múltiples acciones para realizar y para eso tenemos múltiples reductores. Tener múltiples reductores se convierte en un problema más adelante cuando creamos la tienda para nuestro redux.

Para administrar los reductores múltiples, tenemos una función llamada combineReducers en el redux. Básicamente, esto ayuda a combinar múltiples reductores en una sola unidad y usarlos.

Vamos a crear una aplicación para demostrar lo anterior:

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app example

Paso 2: después de crear la carpeta de su proyecto, es decir, ejemplo, muévase a ella con el siguiente comando:

cd example

Paso 3: Instale los siguientes módulos. Desde el directorio raíz de su proyecto en la terminal, ejecute el siguiente comando:

npm install redux

npm install react-redux

Ejemplo: hagamos una aplicación de lista de libros simple con la ayuda de redux para entender cómo combinar múltiples reductores.

Estructura del proyecto : se verá así.

estructura del proyecto

En la carpeta src, cree tres nuevos componentes de carpeta, acciones y reductor. En componentes, agregue dos archivos js llamados book-detail.js y book-list.js. En la carpeta de acciones, agregue un archivo index.js. En reducers, la carpeta agrega tres archivos index.js, reducer_book.js y reducer_active_book.js.

Implementación: Anote el siguiente código en los archivos respectivos.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from "./reducers";
  
ReactDOM.render(
  <React.StrictMode>
     <Provider store={createStore(reducers)}>
    <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

import React from "react";
import { Component } from "react";
  
import BookList from "./components/book-list";
import BookDetail from "./components/book-detail";
  
export default class App extends Component {
  render() {
    return (
      <div style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        height: "100vh"
      }}>
        <BookList />
        <BookDetail />
      </div>
    );
  }
}

En la carpeta de componentes estos archivos son los siguientes:

import React, { Component } from "react";
import { connect } from "react-redux";
  
class BookDetail extends Component {
  render() {
    if (!this.props.book) {
      return <div>Select a book to get started.</div>;
    }
  
    return (
      <div>
        <h3>Details for:</h3>
        <div>Title: {this.props.book.title}</div>
        <div>Pages: {this.props.book.pages}</div>
      </div>
    );
  }
}
  
function mapStateToProps(state) {
  return {
    book: state.activeBook,
  };
}
  
export default connect(mapStateToProps)(BookDetail);

import React, { Component } from "react";
import { connect } from "react-redux";
import { selectBook } from "../actions/index";
import { bindActionCreators } from "redux";
  
class BookList extends Component {
  renderList() {
    return this.props.books.map(book => {
      return (
        <li
          key={book.title}
          onClick={() => this.props.selectBook(book)}
        >
          {book.title}
        </li>
      );
    });
  }
  
  render() {
    return (
      <ul>
        {this.renderList()}
      </ul>
    );
  }
}
  
function mapStateToProps(state) {
  return {
    books: state.books
  };
}
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ 
    selectBook: selectBook }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(BookList);

En la carpeta de acciones

export function selectBook(book) {
    return {
      type: "BOOK_SELECTED",
      payload: book
    };
  }

En carpeta de reductores

import { combineReducers } from "redux";
import BooksReducer from "./reducer_books";
import ActiveBook from "./reducer_active_book";
  
const rootReducer = combineReducers({
  books: BooksReducer,
  activeBook: ActiveBook
});
  
export default rootReducer;

Aquí, en el código anterior, estamos usando combineReducers para combinar 

• LibrosReductor
• Libro activo

Dentro de una sola unidad llamada rootReducer.

export default function books() {
    return [
      { title: "Javascript The Good Parts", pages: 101 },
      { title: "Harry Potter", pages: 39 },
      { title: "The Dark Tower", pages: 85 },
      { title: "Eloquent Ruby", pages: 1 }
    ];
  }

export default function active(state = null, action) {
    switch (action.type) {
      case "BOOK_SELECTED":
        return action.payload;
    default:
        return state;
    }
  }

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npm start

Producción:  

Producción