Don’t despair. I learned React and Redux at the same time and it took me weeks to really get cruising, despite the wealth of learning resources out there (much of it by Dan himself). I thought Dan’s egghead videos were good for understanding reducer composition, but referred to the regular documentation for most other things.
Think of a connected component as being wrapped in a container component which passes in all of the props given to it, then merges in some extra props, then renders its child (your original component).
That container is generated with the `connect` function, instead of `createClass.` `connect` takes anywhere from 1–3 functions which describe the extra props to fold in. The first one is for props which will read from the Redux state. The second is for props which which will generate a new state by dispatching an action. The third is for when you need a mix of the first two, but IMO in the rare case you need that, you’re better off adding an instance method to your component class.
Here are a few lessons I had to learn:
- You don’t need to use Redux for all state. State that stays local to a component can easily be done with React’s setState, which saves you having to add a reducer, action creator, type constants, etc.
- For simple things you can get away with not using action creators, but eventually you will hit a point where you need them, since they are the best place for side effects, like AJAX calls.
- Adding redux-thunk allows you use simpler reducers, because it gives you a simple way to update multiple reducers as the result of a single user interaction.