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

Question

我是 Redux 的新手，所以我可能在某处错过了这部分。我有一个 React.Component 和一个带有开始和停止操作的 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 中初始化的

Answer 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 />
    )
  }

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

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

How to send component's state as payload to store

reactjs

redux

redux-saga

react-redux