在 React with Redux 应用程序中典型的数据流是什么？

Redux 是一个用于管理应用程序状态的开源状态管理 JavaScript 库。它是常用的 ReactJS，但不限于此，还可以与 Angular 等其他 JavaScript 库一起使用。在传统的 React-Redux 应用程序中，只有一个 store 和一个 root reducer。随着应用程序变得越来越复杂，根 reducer 被拆分为更小的 reducer，它们在状态树的不同部分上运行。

对于大规模生产级应用程序，如果应用程序的状态没有得到有效管理并且无法控制，那么重现问题和添加新功能将是一项复杂的任务。 Redux 通过简化状态更新过程来降低代码的复杂性。

React-Redux 应用程序中的数据流

在 React-Redux 应用程序中有四个基本概念控制数据流。

1. Redux 存储： Redux 存储，简单地说，是一个保存应用程序状态的对象。一个 redux 存储可以由组合成一个大对象的小状态对象组成。应用程序中的任何组件都可以通过 connect 方法轻松访问此状态（存储）。
2. 动作创建者：顾名思义，动作创建者是返回动作（对象）的函数。当用户通过其 UI（按钮单击、表单提交等）或在组件生命周期中的某些点（组件安装、组件卸载等）与应用程序交互时，将调用动作创建器。
3. 动作：动作是简单的对象，通常具有两个属性——类型和有效负载。 type 属性通常是指定标识操作的字符串，而有效负载是一个可选属性，其中包含执行任何特定任务所需的一些数据。 action 的主要函数是将数据从应用程序发送到 Redux 存储。
4. Reducers： Reducers 是纯粹的函数，用于更新应用程序的状态以响应操作。 Reducers 将先前的状态和动作作为输入，并返回状态的修改版本。由于状态是不可变的，reducer 总是返回一个新状态，它是前一个状态的更新版本。

React-Redux 应用程序流程

• 当用户与应用程序 UI 交互时，React-Redux 应用程序中的数据流从组件级别开始。这种交互导致动作创建者发送动作。
• 当一个动作被调度时，它被应用程序的根减速器接收并传递给所有减速器。因此，reducer 的任务是根据调度的 action 确定是否需要更新状态。
• 这通过使用简单的 switch 语句过滤掉所需的操作来检查。应用程序中的每个（较小的）reducer 都接受调度的动作，如果调度的动作类型匹配，它返回一个新更新的状态。
• 这里需要注意的是，redux 中的状态实际上从未改变。相反，reducer 总是生成一个新状态，它是旧状态的副本，但有一些修改。
• 然后 store 通知组件新状态，这反过来又检索更新的状态并重新渲染组件。
• 这里的另一个重要观察是 React-Redux 应用程序中的数据流是单向的，即它只向一个方向流动。

创建反应应用程序：

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

  npx create-react-app react-with-redux

• 第 2 步：创建项目文件夹（即 react-with-redux）后，使用以下命令移动到该文件夹：

  cd react-with-redux

项目结构：它将如下所示：

示例：现在在您的 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React, { Component } from "react";
import "./App.css";
import { GetMessage } from "./action/showMessageAction";
import { connect } from "react-redux";
class App extends Component {
  showMessage = () => {
    console.log("CALLING ACTION");
    this.props.getMessage();
  };
  
  render() {
    return (
      

        

          
Flow of data in a React-Redux app
          
            Click me to trigger an action!{" "}
          
          

            The updated state will be displayed here: {this.props.message}
          
{" "}
        
      
    );
  }
}
  
const mapActionsToProps = {
  getMessage: GetMessage,
};
  
const mapStateToProps = (state) => {
  return { message: state.data.message };
};
  
export default connect(mapStateToProps, mapActionsToProps)(App);

减速器/index.js

import { combineReducers } from "redux";
import showMessageReducer from "./showMessageReducer";
  
const combinedReducers = combineReducers({ data: showMessageReducer });
  
export default combinedReducers;

showMessageAction.js：

export const SHOW_MESSAGE = "SHOW_MESSAGE";
  
export const GetMessage = () => {
  console.log("DISPATCHING ACTION");
  return {
    type: SHOW_MESSAGE,
    payload: { message: "Hello from GeeksforGeeks!" },
  };
};

showMessageReducer.js

import { SHOW_MESSAGE } from "../action/showMessageAction";
  
const showMessageReducer = (
  state = { message: "No message" },
  { type, payload }
) => {
  switch (type) {
    case SHOW_MESSAGE:
      console.log("STATE UPDATION");
      return payload;
  
    default:
      return state;
  }
};
  
export default showMessageReducer;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：