如何在 ReactJS 中组合多个减速器？

在 ReactJs 中，当我们使用 redux 状态管理工具时。我们使用动作来执行动作，并且我们有 reducer 来修改和创建我们的 redux 状态的变化。大多数时候，我们有多个动作要执行，为此我们有多个减速器。当我们为我们的 redux 创建 store 时，拥有多个 reducer 会成为一个问题。

为了管理多个 reducer，我们在 redux 中有一个叫做 combineReducers 的函数。这基本上有助于将多个减速器组合成一个单元并使用它们。

让我们创建一个应用程序来演示上述内容：

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app example

第 2 步：创建项目文件夹（即示例）后，使用以下命令移动到该文件夹：

cd example

第 3 步：安装以下模块。从终端中项目的根目录，运行以下命令：

npm install redux

npm install react-redux

示例：让我们在 redux 的帮助下制作一个简单的书单应用程序，以了解组合多个 reducer。

项目结构：它看起来像这样。

项目结构

在 src 文件夹中，新建三个文件夹组件、actions 和 reducer。在组件中添加两个名为 book-detail.js 和 book-list.js 的 js 文件。在操作文件夹中，添加文件 index.js。在 reducers 中，文件夹添加三个文件 index.js、reducer_book.js 和 reducer_active_book.js。

实现：在相应的文件中写下以下代码。

index.js

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(
  
     
    
    
  ,
  document.getElementById('root')
);

应用程序.js

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 (
      

        
        
      
    );
  }
}

在 components 文件夹中，这些文件如下所示：

book-detail.js

import React, { Component } from "react";
import { connect } from "react-redux";
  
class BookDetail extends Component {
  render() {
    if (!this.props.book) {
      return 
Select a book to get started.
;
    }
  
    return (
      

        
Details for:
        
Title: {this.props.book.title}
        
Pages: {this.props.book.pages}
      
    );
  }
}
  
function mapStateToProps(state) {
  return {
    book: state.activeBook,
  };
}
  
export default connect(mapStateToProps)(BookDetail);

book-list.js

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 (
        
 this.props.selectBook(book)}
        >
          {book.title}
        
      );
    });
  }
  
  render() {
    return (
      

        {this.renderList()}
      
    );
  }
}
  
function mapStateToProps(state) {
  return {
    books: state.books
  };
}
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ 
    selectBook: selectBook }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(BookList);

在操作文件夹中

index.js

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

在减速器文件夹中

index.js

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;

在这里，在上面的代码中，我们使用 combineReducers 来组合

• BooksReducer
• 活动书

在一个名为 rootReducer 的单元中。

reducer_book.js

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 }
    ];
  }

reducer_active_book.js

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

运行应用程序的步骤：使用以下命令运行应用程序：

npm start

输出：

输出