Understanding React-Redux

When developing JavaScript-based web applications a common framework choice is React. React is Facebook’s user interface library that provides support for component-based development. React applications often use Redux as a state container imported via the React-Redux library.

Why use Redux in a React application?

React encourages component-based website development. For example, a simple bulleted list might decompose into two components – a parent <ul /> and a child <li />. In React, the state is application data. State propagates one-way through the application. Referring to the previous example, if another component elsewhere on the page needed access to the state inside of the <li />, without redux, the state would need to be hoisted to an ancestor of the two components in question and passed down.

Without Redux

There is a problem:

<App>

<div>

<ul>
<li /> <!-- state stored in this component -->
</ul>
<div> <!-- but this component needs access to the state in the <li /> -->
</div>
</App>

Fixing the problem by hoisting state:

<App>

<div> <!-- move the state from <li /> to here -->
<ul>
<li /> <!-- Pass the state down to here -->
</ul>
<div> <!-- Pass the state down to here -->
</div>
</App>

This issue becomes a major problem at scale. Over time, as more components require access to each other’s state, the immediate solution is to hoist state to the highest component in the entire application and pass it down to necessary child components. Redux solves this problem by providing a single state container that all components can access without the need for hoisting state. The following section will explain how to use Redux with React.

How to Use Redux with React

To see this example in action:

Follow the link here and install Node.

1. Clone the code from the following link: https://github.com/chalb500/spooky-monsters
2. Navigate to the root folder of the locally cloned code
3. Enter ‘npm install’ into your terminal
4. Enter ‘npm start’ into your terminal

Action Creators

Navigate to the actions folder in the solution and open Monsters.js. Inside of this file is a function called “setMonsters” that accepts some monsters and has a “type” of “SET_MONSTERS”.

export const SET_MONSTERS = 'SET_MONSTERS'


export function setMonsters(monsters) {
return {
type: SET_MONSTERS,
monsters
}
} 

Reducers

Navigate to the reducers folder in the solution and open Monsters.js. Inside of this file is a reducer called “monsters” that accepts some state and an action. The action that will apply to this reducer is “SET_MONSTERS” from the action creator above. When “SET_MONSTERS” is triggered, it will create a new copy of the state that includes the monsters that were passed into the action creator above.

import { SET_MONSTERS } from '../actions/monsters'


export default function monsters (state = {}, action) {
switch (action.type) {
case SET_MONSTERS :
return {
...state,
...action.monsters
}
default :
return state
}
}

Connect React Components to Redux

Go to the src folder and open index.js. Inside of here is some boilerplate code where a new redux store is created and the reducers are passed to the store. A Provider component wraps the application and provides downstream components the ability to connect to the redux store.

<Provider store={store}>

<App />
</Provider>,

Navigate to the components folder and open MonsterList.js. The “mapStateToProps” is boilerplate code for accessing data within the store. This boilerplate code provides access to the monsters.

function mapStateToProps({monsters}) {

return {
monsters
}
}

The code at the bottom of this file passes the “mapStateToProps” definition to Redux and instructs Redux to connect the MonsterList to the Redux store.

export default connect(mapStateToProps)(MonsterList);

Initialize the Store

Inside of the same component folder, open up App.js. Inside of the lifecycle method, the store is initialized.

componentDidMount() {

const { dispatch } = this.props

//Initializing the application data
dispatch(setFavorite(FAVORITE))
dispatch(setMonsters(MONSTERS))
}

When you are looking to enhance your digital presence, we can help. UDig has an experienced team of React developers that can leverage the latest technologies to provide cutting-edge web application solutions.