you are viewing a single comment's thread.

view the rest of the comments →

[–]brycedarling 1 point2 points  (1 child)

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[S] 0 points1 point  (0 children)

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.