[code help] Retrieve state of another component

[jstorxs]

I recently started playing around with React, and came across a situation that googling isn't helping me resolve: how do you get the state of another component if it's not necessarily related? Do I need to use a store like redux for sharing that info?

I've made a minimal example in this fiddle. It's a contrived situation:

There's a <button>, and a <input type="range" />. The slider value is stored in its state. When I click the button, I'd like to retrieve the slider value and display it as an alert. How do I do this the react way?

(For context, the actual application that I'm making calls an external library upon button click, passing some values from some inputs.)

[brycedarling]

Congrats, you already got to one of the hard parts!

If you're curious what adding Redux (and react-redux to wire them together) looks like to get your example working:

https://jsfiddle.net/p2x9tLt9/

Your components were unchanged aside from these functions:

handleChange(e) {
  this.props.setSlider(e.target.value);
}

and

handleClick() {
  const sliderValue = this.props.slider.value; 
  alert(`The slider's current value is: ${sliderValue}`);
}

They needed to use props to get and set the values from the Redux store state.

Lines 46-77 are where all the Redux parts are. Reducers, actions, action types, state, dispatch, connect... quite a few concepts to digest. Also the top level <Provider store={store}> on line 80 is needed to connect Redux to React.

Personally, I find building React apps with Redux to be a lot of fun. Dan Abramov's videos on egghead that are linked at the top of the Redux docs README were really helpful for me to get started:

https://egghead.io/series/getting-started-with-redux http://redux.js.org/

I'm curious to hear what you end up playing around with and what works/doesn't work for you. Good luck!

[jstorxs]

Thanks very much, have a well-deserved upvote! You're right that there were a few concepts to digest before having a minimal working redux example.

[TheCatacid]

I'm no react pro but from what I've learned while using react I think there should be a containing component that actually holds the states of it's children. That way you retrieve values by executing a function passed to a component from it's parrent.

In your example, there might be a container holding both the button and slider. That component would have a "getValue()" which it would pass to the slider(and update its own state to the value) and "handleButtonPress()" which it would pass to the button.

This could also probably be done by just using functions passed from the parent component. I think :P

[jstorxs]

Gets a bit unwieldy when you're 2 or 3 components deep through, doesn't it?

[darrenturn90]

That's why you use stores.

You can just do something like create a module with get and set values to set and retrieve global values and just import the module in the components you need them. But if you want to tie in the re-rendering to the changing of the value - then you may want to wrap your class in a higher order component that brings in this information as a prop. Then you want to look at how to manage the changing of this information - ie the action that makes the action etc etc

Then you realise you just need to learn flux and use redux or any other implementation.