React-Redux 简介

熟悉react的都知道react是一个基于组件的前端库工具，连接网页的各个部分。在 react 中，我们在允许使用非静态变量的组件中使用props （属性的缩写）。在 props 的帮助下，我们可以将这些变量从父组件传递到各种其他组件（子组件）中。

示例：将 props 从父组件传递给子组件：

Javascript

import React, { Component } from 'react';
class App extends Component {
  render() {
    const wishes = 'Welcome to My World';
    return (
      

        
      
    );
  }
}
class Greeting extends Component {
  render() {
    return 
Welcome to {this.props.wishes} world!!
;
  }
}
export default App;

react 中状态的存在允许定义它自己的组件变量。在我们的应用程序中使用一些组件，我们可以将这些状态作为道具传递给子组件。但是随着应用程序中组件的数量随着其大目标的增加而增加，我们需要将这些状态传递给组件树中彼此远离的其他组件。此时，将状态作为 props 传输的常用方法变得很复杂，因为并非每个组件都是需要状态的组件的父组件。

示例：初始化组件中的状态并将其作为道具传递给其子组件：

Javascript

class Parent extends Component{
 constructor(props){
  super(props);
  this.state={
   child1=0;
   child2=1;
  };
 }
 render()
 {
  return (
   
   
  );
 }
}

这在我们的 react 应用程序中带来了对react-redux的需求。 React-redux 作为一种状态管理工具，可以更轻松地将这些状态从一个组件传递到另一个组件，而不管它们在组件树中的位置如何，从而防止应用程序的复杂性。

工作流程：当一个 React 应用程序从其他组件中获取各种需要状态的组件时，很难意识到状态应该在这些组件中的哪个位置以使其更易于维护。 React-redux 提供了一个存储，使组件内部的状态更易于维护。与 store 一起，react-redux 引入了与 store 同时工作的action和reducer ，以使状态更可预测。 react-redux 中功能的工作原理如下：

• Store：它包含需要传递给其他组件的组件的状态。存储使这种传递变得更加容易，因为我们不再需要在父组件中维护状态以便将其传递给其子组件。
• 动作： react-redux 的动作部分基本上包含要对存储中存在的状态执行的不同动作。包含的动作必须包含动作的类型，还可以包含有效负载（动作中的数据字段） .
  示例： react 应用程序中的递增和递减操作：

Javascript

export const increment = (num) => {
    return{
        type: 'INCREMENT',
        payload: num
    };
};
 
export const decrement = () => {
    return{
        type: 'DECREMENT',
    };
};

• Reducers： react-redux 中的 reducer 是纯函数，包含需要对状态执行的操作。这些函数接受正在使用的状态的初始状态和操作类型。它更新状态并以新状态响应。这个更新的状态被发送回反应的视图组件以进行必要的更改。 reducer 必须包含 action 类型。
  示例： Reducer 根据动作类型更新状态 1st 程序和 2nd 程序显示了创建接受 reducer 的 store 的片段。
  程序：1

Javascript

const counterReducer = (state=0, action) => {
 switch(action.type)
 {
  case 'INCREMENT':
   return state + action.payload;
  case 'DECREMENT':
   return state - 1;
  default:
   return state;
 }
};

• 程序：2

Javascript

import {createStore} from 'react-redux';
 
const store = createStore(
 counterReducer,
 window.__REDUX__DEVTOOLS__EXTENSIONS__ &&
    window.__REDUX__DEVTOOLS__EXTENSION__()
);

需要的 React-Redux：如上所示，很明显，react-redux 的使用在我们的应用程序中引入了许多样板代码，只是为了将状态从一个组件传递到另一个组件。这可能会导致许多 react-redux 的新学习者不再感兴趣。尽管如此，许多开发人员更喜欢在他们的应用程序中使用 react-redux，原因如下：

• 降低代码复杂性：如前所述，当应用程序拥有大量通过它们的状态相互交互的组件时，很难管理将组件的状态作为道具传递给位于组件树中较远的另一个组件。引入 store 的 React-redux 保存了应用程序组件的状态，因此使代码更简单，因为它消除了状态应该驻留在哪里的混乱。
• 更易于维护：在 store 的帮助下，状态现在位于应用程序中的一个位置，这使得无论何时在各个组件中发生状态更新都更容易维护。
• 减少时间： React-redux 刷新页面的一部分而不是重新加载整个页面，因此节省了我们的时间。
• 轻松调试： React-redux 引入了 reducer，它们是在状态上运行的纯函数，这使得逻辑更简单，有助于实现轻松调试。

安装：要在您的 react 应用程序中安装 react-redux，请在终端中运行以下命令：

npm install react-redux

参考： https://react-redux.js.org/