Good question, the plan is to figure out what Redux is and how it works through a series of pens that follow my learning; before each one I gave myself a little challenge which you can use to learn on your own, so come along.
Before we get started, I should mention that Redux seems to work with frameworks other than React, but I am learning it along React. If you are just getting started check out my other posts on React.js:
React.js helps you make efficient applications with components, but as they tell you mostly serves as the View, the presentation layer, then along came FLUX a pattern for dealing with state, The logic Layer and then REDUX a simplificatin of Flux, so let’s see how Redux fits in with React with a pen:
My/Your challenge: Import Redux and display a React component using redux… Hint: you will need a store.
See the Pen React Redux Store by Eugenio - Keno - Leon (@k3no) on CodePen.
After a little head scratching, I think I got a very basic example of a redux implementation, or at least a Store which contains the state ( a function), I also figured out how to get the current state with getState() which in turn can be passed to a React component,so things look promising. According to the documentation, you need Actions to send information and change State, so let’s figure out those next.
My/Your challenge: Figure out what is an action and use it to change the state.
See the Pen React Redux Actions by Eugenio - Keno - Leon (@k3no) on CodePen.
Well that was interesting, some initial setup needs to happen to change and read state, so let’s see, the store can now change state based on actions,in order to change state, an action is dispatched (from a button component in this case) , the hardest part was syncing the main component to changes in the store, this is done by subscribing to the store and forcing a re render, but I believe I got what an action is, let’s check out reducers next.
My/Your Challenge,Figure out what a reducer is and use it.
See the Pen React Redux Reducer by Eugenio - Keno - Leon (@k3no) on CodePen.
A Reducer turns out is simply a way of getting state out of actions by applying some logic, while at it’s basic this logic can be dealt with an else if statement, there is a bit more nuance to it, namely a set of rules for reducers like immutability and a more complex state (dealt with objects), let’s dig into those next.
My/Your Challenge: Figure out what is immutability and create a reducer for complex state that doesn’t mutate… Yawzhaa!
See the Pen React Redux Immutable Reducer by Eugenio - Keno - Leon (@k3no) on CodePen.
Couple of things going on in the last pen, we upgraded the reducer to work with objects so more complex state can be represented, we also changed the Reducer to a switch statement with an initial object value, and to comply with immutability, we are cloning the state object. In the end we return a new object (After every single click)thus not changing the existing state. Why ? it just keeps you honest by a) not allowing any other part of your script to modify your state directly thus making your code consistent and easier to debug, and b) allows for easier tracking of changes.
Moving on, since we are working along React, let’s figure out how to convert state changes to props
My/Your Challenge: Figure out how to convert state changes to props using React-Redux, connect() and container & presentational components… oh my, this is a little too much to eat in one sitting, so let’s break it down:
Sub Challenge: Create a Container Component and a Presentational Component in React
See the Pen React Redux: Presentational & Container Components by Eugenio - Keno - Leon (@k3no) on CodePen.
The above pen is a minimal example of React-Redux, instead of manually subscribing to the store’s state with a Container Component, connect produces a component with props generated from state that is also subscribed to the store, a Presentational Component, let’s expand on this subject by mapping to specific props just a part of state:
Sub Sub Challenge : connect parts of state to specific props
See the Pen React -Redux: mapStateToProps by Eugenio - Keno - Leon (@k3no) on CodePen.
Through changes in the mapStateToProps function, we now only pass down the props we need our presentational component to be aware off, neat. We still need to deal with the other half of the interaction, dispatching actions through React-Redux, let’s investigate:
New Challenge : Dispatch Actions and change state through React-Redux
Let’s start by Manually dispatching and only connecting mapStateToProps…
See the Pen React -Redux: MapDispatchToProps pt. A by Eugenio - Keno - Leon (@k3no) on CodePen.
And using React-Redux
See the Pen React -Redux: MapDispatchToProps pt. B by Eugenio - Keno - Leon (@k3no) on CodePen.
The same Dispatch is now handled by mapDispatchToProps, and the presentational component can call a prop on click events, double neat : )
With this new understanding, let’s try a more complex app with a complex state tree, and multiple action dispatches.
Final Challenge : Create a more complex app using Redux and Redux-React
See the Pen React + Redux + React-Redux by Eugenio - Keno - Leon (@k3no) on CodePen.
This last pen was probably the hardest, I started with a more ambitious app, but I pared it down (reduced ?) since I started having issues creating and accessing a bigger State Tree, in order to advance in the Redux world, I believe an intermediate understanding of React/ Redux is needed ( along with good ES6/JSON chops) and a few other things. For now, I am happy where this post has taken my understanding of Redux, I hope this helps you as well.
Till Next Time.
Best,
Keno