在反应扩展上使用 Redux - Javascript

在React应用程序中，Redux是一种非常流行的状态管理库。使用Redux，您可以更轻松地管理应用程序的状态并进行操作，从而减少代码中的混乱度并提高代码的可维护性。本文将介绍Redux的基本概念和其在React应用中的应用。

Redux概述

Redux是一种状态管理库，它允许您管理React应用程序中的状态。它非常适合大型应用程序，以便在应用程序的整个生命周期内管理应用程序状态并实现可预测的行为。Redux遵循单向数据流的原则，使数据的更改和传递变得更加可控和易于管理。

Redux由三个主要的组成部分组成：

• Store：状态的集中存储区域。
• Action：更改状态的操作。
• Reducer：根据操作更新状态的功能。

Redux Store

Store是Redux应用程序状态的单一源。它存储了应用程序可能需要的所有信息。为了更好地理解，让我们看一下下面的状态对象：

{
  user: {
    name: 'John',
    age: 30,
    email: 'john@gmail.com'
  },
  products: [
    {id: 1, name: 'Product 1', price: 20},
    {id: 2, name: 'Product 2', price: 30},
    {id: 3, name: 'Product 3', price: 10}
  ],
  shoppingCart: [
    {productId: 1, quantity: 2},
    {productId: 2, quantity: 1}
  ]
}

上面的状态包括三个部分：用户信息、产品信息和购物车信息。Redux存储状态的方式是将这样的状态存储在一个对象中，并将其存储在一个Store中。

Redux Action

Action是描述状态更改的对象。它们是一些信息的包装，通常包括一个操作类型和一些操作的相关数据。操作类型是一个可以识别操作的字符串，而相关数据是要修改的状态的一部分。

举个例子，这是一个添加一个购物车项目的操作：

{
  type: 'ADD_TO_CART',
  payload: {
    productId: 3,
    quantity: 2
  }
}

上面的操作类型是“ADD_TO_CART”，它向购物车中添加一个商品。操作的相关数据是一个对象，其中包含要添加的产品ID以及购买数量。

Redux Reducer

Reducer是一个函数，其将传入操作类型和相关数据，并使用这些数据更新状态。Reducer是一个纯函数，它只接收输入并返回输出，而不会影响其他代码的执行结果。它们返回新的状态对象，而不会更改现有状态。

这是一个简单的购物车Reducer：

const initialState = {
  products: [],
  shoppingCart: []
};

function shoppingCartReducer(state = initialState, action) {
  switch (action.type) {

    case 'ADD_TO_CART':
      const productId = action.payload.productId;
      const quantity = action.payload.quantity;

      const product = state.products.find(p => p.id === productId);
      const newProduct = { ...product, quantity };

      const newProducts = state.products.filter(p => p.id !== productId);
      const newShoppingCart = [ ...state.shoppingCart, newProduct ];

      return {
        ...state,
        products: newProducts,
        shoppingCart: newShoppingCart
      };

    default:
      return state;
  }
}

在React应用程序中使用Redux

要使用Redux，您需要在React应用程序中添加Redux库。在React中，Redux库通常打包在到单个npm包中，可以使用以下命令进行安装：

npm install redux react-redux

创建Redux Store

在Redux中，应用状态由一个单一的JavaScript对象表示。Redux Store是存储该状态的中心地带。Redux Store是由Reducer、InitialState和Redux Devtools Middleware组成的。

创建一个Redux Store的最简单的方法是使用Redux的createStore函数：

import { createStore } from 'redux';

const store = createStore(reducer);

将Redux Store与React应用程序集成

Redux Store以单一状态树的形式存储整个应用程序的状态。但是，React中的组件驱动开发需要在应用程序中按照垂直功能拆分状态。这就是React-Redux的作用。它使我们能够将新的状态分布到React组件层次结构的顶部。

将Redux Store与React组件集成的最常见方法是使用React Redux提供的Provider组件：

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import App from './components/App';
import rootReducer from './reducers/index';

const store = createStore(rootReducer);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

使用Reducer更改Redux Store

在Redux中，更改Store状态的唯一方法是分派一个操作。分派操作时，Reducers会接收该操作及其相关数据，以处理该操作并更新存储状态。Redux Store状态将从中派发事件的Reducer中返回的感知更新为新状态。

我们可以使用store.dispatch方法派发一个操作：

store.dispatch({
  type: 'ADD_TO_CART',
  payload: {
    productId: 3,
    quantity: 2
  }
});

相应地，Reducers将根据Type执行操作并使用相关数据对状态进行更改。

从Redux Store中读取状态

我们可以通过在React组件中使用connect函数从Store中读取状态。

import React from 'react';
import { connect } from 'react-redux';

function App(props) {
  return (
    <div>
      <h1>Shopping Cart</h1>
      <ul>
        {props.shoppingCart.map(item => (
          <li key={item.productId}>
            {item.quantity} x {item.name} @ ${item.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

function mapStateToProps(state) {
  return {
    shoppingCart: state.shoppingCart
  };
}

export default connect(mapStateToProps)(App);

我们使用connect函数将组件与Redux Store连接，并使用mapStateToProps函数将Store中的状态映射到组件的props中。

结论

Redux提供了一种构建可预测React应用的简单方式。除了基本的Redux Store、操作和Reducer之外，Redux还提供了一些中间件来帮助您更好地管理应用程序状态。Redux是一个学习曲线有点陡峭的库，但一旦理解原理，您将过得如鱼得水！