Как отправить состояние компонента в качестве полезной нагрузки для хранения

Question

Я новичок в Redux, так что я мог где-то пропустить эту часть.У меня есть React.Component и магазин Redux-Saga с действиями START и STOP.Что я собираюсь сделать, так это отправить состояние Компонента как полезную нагрузку, чтобы сохранить его в хранилище резервов, но у меня не получается

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)

То, что я получаю, это [], как оно было инициализировано в редукторах

Answer 1

Потерять начальное выражение let. Такое определение означает, что вы всегда будете отправлять только начальное значение, поскольку это было то значение, которое было при определении функций создателей действий.

Вы должны определить своих создателей действий, чтобы они могли получать аргументы:

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

Ваш mapDispatchToProps передаст эти функции на подпорки вашего компонента, чтобы вы могли их вызывать:

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

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

Имейте в виду, что в этом примере вызовы одновременно запускаются и останавливаются на каждом рендере, убедитесь, что вы вызываете их только тогда, когда хотите.