Step by Step Guide To Building React Redux Apps

rajaraodv
rajaraodv
Feb 25, 2016 · 8 min read

Why Redux?

STEP 1 — Write A Detailed Mock of the Screen

STEP 2 — Divide The App Into Components

Redux Terms: “Actions” And “States”

STEP 3 — List State and Actions For Each Component

3.1 AddTodo Component — State And Actions

3.2 TodoList Component — State And Actions

3.3 Filter Component — State And Actions

Redux Term: “Action Creators”

STEP 4 — Create Action Creators For Each Action

//1. Takes the text from AddTodo field and returns proper “Action” JSON to send to other components.
export const addTodo = (text) => {
return {
type: ‘ADD_TODO’,
id: nextTodoId++,
text, //<--ES6. same as text:text, in ES5
completed: false //<-- initially this is set to false
}
}

//2. Takes filter string and returns proper “Action” JSON object to send to other components.
export const setVisibilityFilter = (filter) => {
return {
type: ‘SET_VISIBILITY_FILTER’,
filter
}
}

//3. Takes Todo item’s id and returns proper “Action” JSON object to send to other components.
export const toggleTodo = (id) => {
return {
type: ‘TOGGLE_TODO’,
id
}
}

Redux Term: “Reducers”

For example the below function takes Redux’ state(an array of previous todos), and returns a **new** array of todos(new state) w/ the new Todo added if action’s type is “ADD_TODO”.const todo = (state = [], action) => {
switch (action.type) {
case ‘ADD_TODO’:
return
[…state,{id: action.id, text: action.text, completed:false}];
}

STEP 5 — Write Reducers For Each Action

const todo = (state, action) => {
switch (action.type) {
case ‘ADD_TODO’:
return […state,{id: action.id, text: action.text,
completed:false}]

case ‘TOGGLE_TODO’:
return state.map(todo =>
if (todo.id !== action.id) {
return todo
}
return Object.assign({},
todo, {completed: !todo.completed})
)

case ‘SET_VISIBILITY_FILTER’: {
return action.filter
}

default:
return state
}
}

Redux Term: “Presentational” and “Container” Components

STEP 6 — Implement Every Presentational Component

6.1 — Implement AddTodoForm Presentational Component

6.2 — Implement TodoList Presentational Component

6.3 — Implement Link Presentational Component

STEP 7 — Create Container Component For Some/All Presentational Component

7.1 Create Container Component — AddTodo

7.2 Create Container Component — TodoList Container

7.3 Create Container Component — Filter Container

STEP 8 — Finally Bring Them All Together

import React from ‘react’ // ← Main React library
import { render } from ‘react-dom’ // ← Main react library
import { Provider } from ‘react-redux’ //← Bridge React and Redux
import { createStore } from ‘redux’ // ← Main Redux library
import todoApp from ‘./reducers’ // ← List of Reducers we created
//Import all components we created earlier
import AddTodo from ‘../containers/AddTodo’
import VisibleTodoList from ‘../containers/VisibleTodoList’
import Footer from ‘./Footer’ // ← This is a presentational component that contains 3 FilterLink Container comp
//Create Redux Store by passing it the reducers we created earlier.
let store = createStore(reducers)
render(
<Provider store={store}> ← The Provider component from react-redux injects the store to all the child components
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
</Provider>,
document.getElementById(‘root’) //<-- Render to a div w/ id "root"
)

My Other Blogs

React Performance:

ES6

WebPack

Draft.js

React And Redux :

Salesforce

rajaraodv

Written by

rajaraodv

Trying to make Web development simple. Former Developer Advocate @Salesforce, VMware (node.js); Engineer @ Yahoo, Zimbra. Twitter: @rajaraodv

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade