在 React Redux 中将状态与先前的状态连接起来

在 React Redux 中，我们可以使用 connect 方法将状态和操作绑定到组件上，使其变得可控。但在某些特定场景中，我们需要将先前的状态与当前状态连接起来，实现数据的累加或合并。本文将介绍如何实现这个目标。

在 reducer 中将状态与先前状态连接起来

在 reducer 中，我们可以通过对传入的 action 进行判断，决定是将状态累加还是合并。

假设现在我们有一个简单的状态树，包含一个 count 属性，我们要实现以下功能：

• 如果接收到的 action 类型是 ADD_COUNT，则将 count 加 1。
• 如果接收到的 action 类型是 MERGE_COUNT，则将 payload 中的 count 与当前的 count 进行合并。

// reducer.js

const initialState = {
  count: 0
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_COUNT':
      return {
        ...state,
        count: state.count + 1
      }
    case 'MERGE_COUNT':
      return {
        ...state,
        count: state.count + action.payload.count
      }
    default:
      return state
  }
}

export default reducer

在上述代码中，我们通过 action 的类型来判断累加或合并的逻辑，并将 action.payload.count 的值与当前的 count 相加，最终返回一个新的状态对象。

在组件中获取先前的状态

在连接状态和操作之后，我们可以通过 mapStateToProps 将 count 属性与组件绑定。但这样并不能实现将先前的状态与当前状态连接起来。

为了实现这个功能，我们可以使用 componentDidUpdate 生命周期钩子，将先前的状态与当前状态合并。一种实现方案如下：

// MyComponent.js

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'

class MyComponent extends PureComponent {
  state = {
    prevCount: 0
  }

  componentDidUpdate(prevProps) {
    // 如果 count 发生了变化，且新的 count 大于旧的 count，则更新 prevCount 的值
    if (prevProps.count !== this.props.count && this.props.count > prevProps.count) {
      this.setState({
        prevCount: prevProps.count
      })
    }
  }

  render() {
    const { count } = this.props
    const { prevCount } = this.state

    return (
      <div>
        <p>当前 count 的值：{count}</p>
        <p>先前 count 的值：{prevCount}</p>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    count: state.count
  }
}

export default connect(mapStateToProps)(MyComponent)

在上述代码中，我们通过新增 state 属性 prevCount 来保存先前的状态，然后在 componentDidUpdate 中判断 count 是否有更新，如果存在更新且新的值大于旧的值，则更新 prevCount 的值。最后，我们将 prevCount 的值展示在组件中。

结论

通过在 reducer 中生成新的状态对象，以及在组件中使用生命周期钩子保存先前的状态，我们可以实现将状态与先前的状态连接起来的功能。这种方式适用于需要将之前的数据进行累加或合并的情形。