When building React-redux applications, there are 4 key concepts to understand. If you have a high level understanding of these 4 concepts, you’ll have a much easier time building your application.
Container components are React components that are hooked in to your global Redux application state. They will behave differently and render different content depending on the state of the application. Redux has a
connect function that you can use to connect a component with a piece of the global application state using a
Interactive components are React components that are hooked into your application’s Action Creators. This means that they present an interface to the user that allows them to trigger actions that will update the global application’s state. The Redux
connect function can also be used to connect a component with your action creators, using a
mapDispatchToProps function. (In this function, we also call the
bindActionCreators function, imported from redux, so that calling the action creator will result in the action being dispatched to the reducers later on.)
Action Creators are simply functions that return an action object. This object has a required
'type' key and an optional
'payload'. Whenever an action creator is called, the returned action object will be passed to all of the reducers. If these actions result in an AJAX request, we can use a combination of axios and redux-promise middleware to make sure that the promise returned from the AJAX request resolves before the action is dispatched to the reducers.
Reducers are also simply functions that take two arguments and return an object representing the state of the application. The first parameter is called
state and it represents the current state of the application. The second parameter is called
action and it represents the action that was returned from calling the action creator.
These reducer functions are at the heart of how redux reduces the amount of changes necessary to keep the application state up to date. Each reducer is responsible for a certain piece of the global application state.
Let’s go a little deeper here. Reducer functions typically contain a switch statement on the action’s type property. If the action’s type is one that the particular reducer cares about, then it will return a new state object representing the state of the application after incorporating changes based on the action’s payload. It’s important here not to mutate the
state parameter passed to the reducer, but to return a brand new state object instead.
If the particular reducer doesn’t care about this type of action, it will simply return the same
state object that it was passed as a parameter. This way, the application state can be passed to all of the reducers every time an action creator fires, allowing the entire application state to be updated in response to every user action.
Coming Full Circle
Putting it all together, once all of the reducers have been called and the application state has been updated, all of the redux-connected container components that are affected by the changes in state will receive new props and re-render.
If you’d like to go deeper into learning React and Redux, I highly recommend Stephen Grider’s Modern React with Redux course on Udemy. It’s wonderfully paced and full of detailed diagrams and descriptions of how to use React with Redux.
Also published on Medium.