CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-saga
Vasyl Butov
Vasyl Butov

Reputation: 474

How to send component's state as payload to store

I am new to Redux so I might have missed this part somewhere. I have a React.Component and a redux-saga store with actions START and STOP. What I'm stying to do is to send Component's state as payload to keep it in redux store but it doesn't work my way

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)

What I get is [] as it was initialized in reducers

Upvotes: 1

Views: 1124

Answers (1)

Raicuparta
Raicuparta

Reputation: 2115

Lose the inicial let statement. Defining it like that means that you would always be sending only the initial value, since that's what the value was when the action creators functions were defined.

You should define your action creators so that they can receive arguments:

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

Your mapDispatchToProps will then pass these functions onto the props of your component, so you can call them:

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

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

Keep in mind that this example is calling both start and stop simultaneously on every render, make sure you call them only when you mean to.

Upvotes: 1

Related Questions