React-redux add a new variable to state

Question

I am struggling to get working on a React-redux application to pass a value via the state from one component on to another. I do not wish to use the reducer and/or dispatch because I am not calling a webservice, I just want to take a value from a textbox form to enable another control on the order component.

Firstly, I can grab the value from control, but when mapstatetoprops is called the variable I set and wish to add to the state is undefined. This also possibly explains why my other problem. On my other component the function to use props is never called because of the state-componentWillReceiveProps

Here is the relevant code snippet :

<ListItemContent>
    <Control component={Textfield} model="somemodel" label="MyLabel" onBlur={this.onChangeOfValue}/>
</ListItemContent> 

onChangeOfValue = (event) => { 
    this.setState({ 
        newValueToPassAlong: event.target.value
    }); //newValueToPassAlong is set in constructor 
};

let mapStateToProps = (state) => { 
    return {
        newValueToGive: state.newValueToPassAlong
    } // This is undefined
}; 

export default connect(mapStateToProps)(form)

So, my question is how do add a new variable to a state using React-redux without the need of reducers, etc and with this can I access this variable in my other component?

What's wrong with using an action creator/reducer with non-networked actions? That said, read this for a potential solution. facebook.github.io/react/docs/lifting-state-up.html — Tyler Sebastian
– Tyler Sebastian, Commented Mar 16, 2017 at 18:31
It feels a lot to do when all I need to know if a value has been entered in the textbox, plus the code I have inherited is using saga which seems to have a bug in it — Andy5
– Andy5, Commented Mar 16, 2017 at 18:33
if you use redux, actions and reducers are your tools of the trade. — Davorin Ruševljan
– Davorin Ruševljan, Commented Jun 14, 2017 at 14:14

Tyler Sebastian · Accepted Answer · 2017-03-16 18:39:57Z

3

Ok action creator preferences aside, if you want to sync something between two components which share a common parent, you have to bring that state into the parent.

class ParentComponent {
    onItemChanged = (newData) => {
        this.setState({ thing: newData });
    }

    render() {
        return (
            <div>
                <ChildA onItemChanged={ this.onItemChanged } />
                <ChildB thing={ this.state.thing } />
            </div>
        );
    }
}

when you change the value in ChildA, use this.props.onItemChanged with the new value. In ChildB, that value will be synchronised in this.props.thing. React will handle all the Component/prop updates.

That all being said, I genuinely think there's nothing wrong with using an action creator/reducer.

answered Mar 16, 2017 at 18:39

Tyler Sebastian

9,5887 gold badges42 silver badges64 bronze badges

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

Comments

Kodanda Rama Durgarao Poluri · Accepted Answer · 2017-03-16 18:33:13Z

0

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

Refer documentation for more about setState()

answered Mar 16, 2017 at 18:33

Kodanda Rama Durgarao Poluri

4432 gold badges6 silver badges14 bronze badges

1 Comment

Tyler Sebastian Over a year ago

Even if he used the callback method, he's trying to access a component local state from within mapStateToProps, which uses the global state store.

Collectives™ on Stack Overflow

React-redux add a new variable to state

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related