The Basics of React & Redux [DIAGRAM]

Shelby Ludlow
July 2, 2018

React & Redux: Front-End Stack Flow

Redux

Redux is a “predictable state container for JavaScript apps”. With Redux, the state of your entire application is stored in a “store”, which is a single object tree. This allows the developers to persist the app’s state in development, and makes for easier debugging as changes to the state are easily seen, and there are developer tools that allow you to step backwards by action. The state is also read only, so the only way to change it is to emit an action. This ensures that callbacks and views will never write to the state, and since it happens in a strict order, there are no race conditions to take care of. An action is an object that describes what action has taken place. Reducers then execute the action. Reducers are written as pure functions that take the previous state and an action, and returns a new state object. Because of this, all of the state is accessible through actions that can be performed anywhere in the app. When the state is updated, the app will update. In context with Compass, this allows the state to store all necessary data and information, which can then be updated and pointed at by each visualization without having to go through chains of MVC (Model-View-Controller).

To go into further detail, actions are plain JavaScript objects, which are sent to the store using:
store.dispatch(action)

Each action must have a type, for example:
ADD_TODO = ‘ADD_TODO’.

There are also action creators, which are functions that simply return an action. This makes them portable and easy to test:
addTodo(text) { return ADD_TODO}

The action is then bound to dispatch:
const addTodo = (text) => dispatch(addTodo(text))

This means we can call addTodo(text) directly to dispatch the action to the store.

Next, the action is implemented by reducers. The action object is an indication that something has happened, but does not specify the state change that happens in response. The reducer function takes in the details given by the action and the previous state and uses them to create and return the new state. For example, the function todoApp would take in the previous state and the action, assign the previous state to a new object and add the actions text property to it. It would then return the “modified” state as the new state object.

Selectors are handy constant functions that return a reference the appropriate part of the state. For example:

const doneTodo = (state) => state.done, const needTodo = (state) => state.need.

It’s a simple way of exporting the proper portion of the state to the appropriate places. This means that instead of having to go through a complicated state every time, you can simply create selectors to export to use instead.

 

React

React is described as “a JavaScript library for building user interfaces”. While Redux takes care of the application state, React is what takes care of the actual visual UI. React is a declarative and component-based library that can use its own XML-like syntax called JSX. The encapsulated components each handle their own state (separate from the Redux state), and thus are able to keep state details out of the DOM files. What makes React unique is the reconciliation that it does. The API seems like it re-renders the entire app on an update, but instead, React compares the current DOM with the updated virtual DOM (which costs very little), and only re-renders bits of the DOM that have changed. This way, the rendering cost is much less than with other libraries or APIs.

How React works as an example is as such: each reusable visual component of the application is a React component. They each are initiated with “props” which should be considered immutable. Sometimes properties from the Redux state are bound to these props. The component is constructed, mounts, and renders, usually returning a component built from JSX. Now, when something happens (a function completes, an interaction happens, etc.), if the state of the React component changes, it will trigger a re-render (in other words, a virtual DOM diff then re-render). If new props are received and it is determined that the component should update, it updates its props and does so.

 

Summary

To summarize and simplify the use of both React and Redux, information required by the application is stored in an immutable state called the Redux “store”. Selectors “select” portions of the state to feed to React as props. Through interactions on the components, actions are emitted, which are objects containing the new information to be updated. These are picked up by reducers, which are pure functions who take the previous state and action, and create a new updated state object, which is now in the store. Since the React props are bound to the store state, React goes through its own lifecycle, checks the virtual DOM to see what has to be re-rendered, and then does the limited re-rendering to update the view for the user.

 

Resources

Leave a Reply

Your email address will not be published. Required fields are marked *