react-redux handling multiple data with redux

Question

I am trying to set a global state using redux and it works when I try to pass single data but not working when I try to pass multiple data. Below is my code:

<CSButton
           onPress={() => {
                          this.setState({
                            comment   : this.state.comment,
                            region  : this.state.region,            
                           },
                    () => this.props.commentHandler(this.state),
                          this.props.regionHandler(this.state), 
           // I am getting correct answer when I console.log here         
                    () => console.log(this.props.comment,'this.props.comment?'),
                    () => console.log(this.props.region,'this.props.region?'))}}>
           <Text>Button</Text>
          </CSButton>

//when I try to console.log using another button, works fine for 'this.props.comment'

           <Button
                    title='comment'
                    onPress={()=> console.log(this.props.comment,'comment')}>
          </Button>

    //But when I try to console.log `this.props.region` it gives me undefined

          <Button
                title='region'
                onPress={()=> console.log(this.props.region,'region')}>
          </Button>

function mapStateToProps(state) {
    return {
        region   : state.region,
        comment  : state.comment,
    }
}

function mapDispatchToProps(dispatch) {
    return {
        regionHandler  : (state) => dispatch({ type: 'REGION', payload: state.region}),
        commentHandler : (state) => dispatch({ type: 'COMMENT', payload: state.comment}),

    }
}

App.js

const initialState = {
    comment:'',
    region:[],
}

const reducer = (state = initialState, action) => {
  console.log(action);
    switch (action.type)
    {
        case 'COMMENT':
            return { comment: action.payload}
        case 'REGION':
            return { region: action.payload}
    }
    return state
}

const store = createStore(reducer)

It seems that my code is only calling the first handler which is this.props.commentHandler(this.state) but not the second one this.props.regionHandler(this.state).

Is there a way I could fix this issue? Any advise or comments would be really appreciated!

Can you post the codes of your actions and reducer?

isuruAb
– isuruAb

2018-11-02 02:09:02 +00:00
Commented Nov 2, 2018 at 2:09 — isuruAb
– isuruAb, Commented Nov 2, 2018 at 2:09
@IsuruAbeywardana I just did it thanks!

kirimi
– kirimi

2018-11-02 02:14:15 +00:00
Commented Nov 2, 2018 at 2:14 — kirimi
– kirimi, Commented Nov 2, 2018 at 2:14

isuruAb · Accepted Answer · 2018-11-02 02:49:06Z

1

You have assigned your initial state to the statestate = initialState but never used. every time you trigger an action you send a new object to the view. You have to set it to the state.

Try this out. You have to do this in immutable way.

   const reducer = (state = initialState, action) => {
        switch (action.type)
        {
            case 'COMMENT':
                state = {
                    ...state,
                    comment: action.payload,
                }
                break;
            case 'REGION':
                state = {
                    ...state,
                    region: action.payload,
                }
                break;
        }
        return state
    }

And I just noticed you missed breaks; in your code.

If you have a doubts about immutable state tree. refer this free video series. Link

edited Nov 2, 2018 at 2:49

answered Nov 2, 2018 at 2:22

isuruAb

2,2405 gold badges28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kirimi Over a year ago

wow! you are correct! thanks so much! It would be great if you could explain what is happening? I want to know what i did wrong.

isuruAb Over a year ago

@kirimi It is pleasure to help you. I updated the answer. refer this video If you do not understand it. youtube.com/…

Alexei Darmin · Accepted Answer · 2018-11-02 01:58:49Z

1

this.setState(partialState, callback) takes only one callback function. You are passing it two functions here:

 () => this.props.commentHandler(this.state),
       this.props.regionHandler(this.state),

Instead try:

() => {
  this.props.commentHandler(this.state)
  this.props.regionHandler(this.state)
}

answered Nov 2, 2018 at 1:58

Alexei Darmin

2,1691 gold badge20 silver badges31 bronze badges

1 Comment

kirimi Over a year ago

thanks for the comments. Yea I thought about this and tried but it gives me the same results.

Collectives™ on Stack Overflow

react-redux handling multiple data with redux

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related