The Redux Flow: Outsource the boring part of Coding

Photo by Quinten de Graaf on Unsplash

What is it that makes coding fun? Well, it’s the capacity to resolve problems in the most natural way.

This can sometimes be a luxury, as efficient and intuitive solutions don’t always come from the first try.

Trial and continuous patching and other work-around measures have a tendency to make the code very hard to read
and eventually to edit. Another common source of code being unintelligible is handling data transfers between different parts of the same project.

Now most of what makes a code readable is planning for clear project structuring, and this is where Redux is a ready to use tool designed to make different components interactions intuitive and react projects easier to start,
edit, and in general to develop.

From the get-go, Redux provides a clear and common structure for all projects with the most interesting advantage being a centralized State for the whole project. The best way to envision How Redux work is by imagining a sequential set of Pipes.

Through the use of what is called Reducers (hence the name), which can be considered as the pipes, Redux allows for the evolving of the app from one state to the next. The analogy with the pipes helps since it fixes the range of evolution in these states to what is demanded by the action (we will elaborate on them later), hence avoiding any sort of unpredicted, unplanned
by-products which are the leading causes of various late edits and other handy workarounds.

We will elaborate now on what makes it flow smoothly by discovering the major key concepts of Redux.

Global State:
Redux describes the state of the Application using one object.
This global state is then handled by the Store.
Code Example:

const store = createStore(rootReducer, preloadedState, composeWithDevTools(applyMiddleware(thunk)));

The Global State’s unicity is what allows for easy debugging later and
easy implementation of repetitive functions.
Note: Getting the state of the entirety of the app is then effortless using

store.getState(). 

Other Tools like Redux’s DevTools can directly be integrated to Chrome, allowing for the consulting of the app’s state
while developing.

Actions:
These are what make the app’s state evolve. Their use makes it that the interactions between different parts of the app are “standardized” allowing us to focus more on application logic.
Code Example:
Example of Hard-Coded Actions:

{ type: ‘EDIT_TODO_STUFF’, id: 2, stuff: ‘not boring stuff’ }

In Reality, Hard Coded Actions are not used that much (if any?). Alternatively, we use action creators that depending on the situation introduce the right modifications. Usually, we’ll need a dispatch function to do this.
Code Example:

try {
  const response = await fetchAllHomePageStuff()();
  dispatch({ type: FETCH_STUFF, payload: response });
} catch (error) {
  errorHandler(error);
}

Note: Since the State is in Read-only, the only way to modify it is through the use of actions.
This centralized approach simplifies state updates, especially when these updates need to be introduced sequentially.

Reducers:
These are functions that link the states of the Global state to the actions. Their output is in a nutshell the updated state.
Note: We use combineReducers to wrap all reducers in a root reducer, to, in a sort of way, mirror the global state, and its sub-states.
Reducers are pure functions, which means their return value is the same for the same arguments. This allows for more predictability, as the combination of the same actions and state as arguments, will always produce the same result, which is the next state.
Code Example:

export default (state = initialState, { type, payload }) => {
switch (type) {
  case FETCH_ACTIVITY_BY_ID:
    return { …state, …payload };
  case RESET_ACTIVITY:
     return { initialState };
  default:
     return state;
 }
};

Note: Generally Reducers are Switch type functions that match each type of action (entered as argument) to the next output state (relative to the
state entered as an argument too)

Now to summarize all this boring talk, here’s a diagram that pretty much presents the whole flow of a Redux application.

This has been developed by myself at eDonec.