PWA 开发中使用 Redux 进行状态管理的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

在现代的 Web 应用中，状态管理是一项很重要的任务，它可以让我们实现更好的用户体验和功能。在开发 PWA (Progressive Web App) 的过程中，我们需要对应用程序状态进行管理，以便在不同的条件下快速响应用户请求。

Redux 是一种流行的状态管理解决方案，它可以帮助我们更好地管理应用程序的状态，并且减少了因状态的复杂性而产生的 bug。

1. 安装 Redux

首先，我们需要在应用程序中安装 Redux。可以通过 npm 来安装 redux，具体的命令如下：

npm install redux

2. 创建 Store

接下来，我们需要创建 Store。Store 是 Redux 中保存应用程序状态的地方。在这里，我们定义了状态、状态的行为以及状态的响应方式。例如，在一个购物车应用程序中，状态可能包括每个物品的数量、价格和总价格。行为包括添加物品到购物车和从购物车中删除物品。响应方式包括将状态更新到服务器以及将状态保存在客户端中。

在创建 Store 之前，我们需要定义状态和状态的行为。可以使用 actions 和 reducers。

2.1 定义 Action

Action 是一个对象，它描述了某个事件的发生。例如，在购物车应用程序中 add-to-cart 行为应该传递商品 ID。actions 的结构是固定的，它们通常包括以下两个属性：

{
  type: 'ADD_TO_CART',
  payload: {
    productId: 1,
    quantity: 1
  }
}

2.2 定义 Reducer

Reducer 是一个函数，当 Action 发生时，改变 State。Reducer 必须是一个纯函数，它只能接收 State 和 Action 作为参数，并恰好返回新的 State。

// javascriptcn.com 代码示例
const initialState = { cart: [] }

function cartReducer(state = initialState, action) {
  switch(action.type) {
    case 'ADD_TO_CART':
      return {
        ...state,
        cart: [
          ...state.cart,
          {
            productId: action.payload.productId,
            quantity: action.payload.quantity,
          }
        ]
      }
    default:
      return state
  }
}

2.3 创建 Store

一旦定义了 actions 和 reducers，我们就可以创建 Store 了。

import { createStore } from 'redux'
import cartReducer from './reducers/cartReducer'

const store = createStore(cartReducer)

在这里，我们先 import createStore，这是用于创建 Store 的 Redux 方法。store 会通过 cartReducer 进行管理。

3. 使用 Connect 将 Redux 和 React 进行绑定

我们需要在 React 组件上绑定 store，并通过连接函数完成。连接函数使我们无需手动映射 store 的状态，它帮我们把 Redux 存储库中的状态绑定到组件的 Props 中。

例如，在以下代码中，我们将 connect 函数用于组件中。

// javascriptcn.com 代码示例
import React, { Component } from 'react'
import { connect } from 'react-redux'

class ShoppingCart extends Component {
  render() {
    const { cart } = this.props
    return (
      <div>
        <h1>Shopping Cart</h1>
        <ul>
          {cart.map(item => (
            <li key={item.productId}>
              {item.quantity} × Product ID {item.productId}
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

export default connect((state) => {
  return {
    cart: state.cart,
  }
})(ShoppingCart)

在这里，我们用 connect 函数把 cartState 映射到组件上，而不用手动调用 state.cart。这使得我们可以直接访问 cartState，而不需要了解它是如何存储的。

4. 触发 Action

最后，我们需要触发 Action 以更新状态。有两种方法可以触发 Action：直接使用 Store 的方法 dispatch，或者使用 bindActionCreators。

store.dispatch({
  type: 'ADD_TO_CART',
  payload: {
    productId: 1,
    quantity: 1
  }
})

import { bindActionCreators } from 'redux'
import { addToCart } from './actions/cartActions'

const mapDispatchToProps = (dispatch) => bindActionCreators({
  addToCart,
}, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCart)

在这里，我们定义 mapDispatchToProps 函数，它通过 bindActionCreators 工具绑定了 addToCart，然后传递给商品组件。这样，在组件中调用 this.props.addToCart 方法，就可以通过 Store 触发 ADD_TO_CART Action 了。

总结一下，使用 Redux 可以帮助我们实现更好的状态管理，使应用程序更可靠和可控。在使用 Redux 时，需要明确 Actions、Reducers 和 Store 的职责以及如何处理它们之间的关系。同时，使用 React-Redux 的 Connection API 可以使我们更快速地将 Store 和 Components 进行绑定。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653407557d4982a6eb7da1c9