如何将组件的状态作为有效负载发送到存储答案

【问题标题】：How to send component's state as payload to store如何将组件的状态作为有效负载发送到存储
【发布时间】：2019-05-24 09:06:14
【问题描述】：

我是 Redux 的新手，所以我可能在某个地方错过了这部分。我有一个 React.Component 和一个带有 START 和 STOP 动作的 redux-saga 商店。我要做的是将组件的状态作为有效负载发送以将其保存在 redux 存储中，但它不适合我的方式

let PAYLOAD = {}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
    }
  }

  /* some functions */

  render() {
    const { data } = this.state

    PAYLOAD = data
    return (
      <div />
    )
  }
}

function action(type, payload = {}) {
  return { type, ...payload }
}

export const START = () => action('START', PAYLOAD)
export const STOP = () => action('STOP', PAYLOAD)

const mapStateToProps = state => ({
  data: state.data,
})

const mapDispatchToProps = {
  start: START,
  stop: STOP,
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

我得到的是 []，因为它是在 reducer 中初始化的

【问题讨论】：

标签： reactjs redux react-redux redux-saga

【解决方案1】：

丢失最初的 let 语句。像这样定义它意味着您将始终只发送初始值，因为这就是定义动作创建者函数时的值。

您应该定义您的动作创建者，以便他们可以接收参数：

export const START = payload => action('START', payload)
export const STOP = payload => action('STOP', payload)

然后你的mapDispatchToProps 会将这些函数传递给你的组件的 props，所以你可以调用它们：

  render() {
    const { data } = this.state
    const { start, stop } = this.props

    start(data)
    stop(data)
    return (
      <div />
    )
  }

请记住，此示例在每次渲染时同时调用 start 和 stop，请确保仅在需要时调用它们。

【讨论】：