CODEWITHSUNDEEP
javascriptreactjsreact-nativereduxreact-redux
rrain
rrain

Reputation: 61

React Native Redux - Passing variable into dispatch

Given an App.js file with these code snippets for redux:

const initialState = {
    selection: ''
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'selection1':
            return { selection: 'selection1' }
        case 'selection2':
            return { selection: 'selection2' }
    }
    return state
}

const store = createStore(reducer)

and an Redux.js child component with a picker and redux dispatch:

<Picker onValueChange={(itemValue) => this.props.changeSelection(itemValue)}>
    <Picker.Item label="Option1" value="selection1">
    <Picker.Item label="Option2" value="selection2">
</Picker>


function mapDispatchToProps(dispatch) {
    return {
        changeSelection: () => dispatch({ type: itemValue })
    }
}

I can't seem to figure out how to pass the itemValue that the picker switches to into the dispatch and then update the state in the App.js reducer. Is it correct to pass in itemValue into this.props.changeSelection() and then have it set as the type in the dispatcher?

Upvotes: 0

Views: 1051

Answers (1)

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18143

You need to change this line

changeSelection: () => dispatch({ type: itemValue })

by this line

changeSelection: (itemValue) => dispatch({ type: itemValue })

changeSelection should have one parameter which is the itemValue

By the way I think itemValue should not be set into the action type, it's more related to the action payload actually, you could dispatch an action like this 

{ type: 'UPDATE_SELECTION', payload: itemValue }

then your reducer would be like this

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_SELECTION':
        return { ...state, selection: action.payload }
  }
  return state
}

Upvotes: 3

Related Questions