In this blog, we will learn how to implement flux pattern in React applications. We will use Redux framework. The goal of this chapter is to present the simplest example of every piece needed for connecting Redux and React.

Step 1 – Install Redux

We will install Redux via the command prompt window.
C:\Users\username\Desktop\reactApp>npm install –save react-redux

Step 2 – Create Files and Folders

In this step, we will create folders and files for our actions, reducers, and components. After we are done with it, this is how the folder structure will look like.
C:\Users\Tecklearn\Desktop\reactApp>mkdir actions
C:\Users\Tecklearn\Desktop\reactApp>mkdir components
C:\Users\Tecklearn\Desktop\reactApp>mkdir reducers
C:\Users\Tecklearn\Desktop\reactApp>type nul > actions/actions.js
C:\Users\Tecklearn\Desktop\reactApp>type nul > reducers/reducers.js
C:\Users\Tecklearn\Desktop\reactApp>type nul > components/AddTodo.js
C:\Users\Tecklearn\Desktop\reactApp>type nul > components/Todo.js
C:\Users\Tecklearn\Desktop\reactApp>type nul > components/TodoList.js

Step 3 – Actions

Actions are JavaScript objects that use type property to inform about the data that should be sent to the store. We are defining ADD_TODO action that will be used for adding new item to our list. The addTodo function is an action creator that returns our action and sets an id for every created item.
actions/actions.js
export const ADD_TODO = ‘ADD_TODO’

let nextTodoId = 0;

export function addTodo(text) {
return {
type: ADD_TODO,
id: nextTodoId++,
text
};
}

Step 4 – Reducers

While actions only trigger changes in the app, the reducers specify those changes. We are using switch statement to search for a ADD_TODO action. The reducer is a function that takes two parameters (state and action) to calculate and return an updated state.
The first function will be used to create a new item, while the second one will push that item to the list. Towards the end, we are using combineReducers helper function where we can add any new reducers we might use in the future.
reducers/reducers.js
import { combineReducers } from ‘redux’
import { ADD_TODO } from ‘../actions/actions’

function todo(state, action) {
switch (action.type) {
case ADD_TODO:
return {
id: action.id,
text: action.text,
}
default:
return state
}
}
function todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [
…state,
todo(undefined, action)
]
default:
return state
}
}
const todoApp = combineReducers({
todos
})
export default todoApp

Step 5 – Store

The store is a place that holds the app’s state. It is very easy to create a store once you have reducers. We are passing store property to the provider element, which wraps our route component.
main.js
import React from ‘react’

import { render } from ‘react-dom’
import { createStore } from ‘redux’
import { Provider } from ‘react-redux’

import App from ‘./App.jsx’
import todoApp from ‘./reducers/reducers’

let store = createStore(todoApp)
let rootElement = document.getElementById(‘app’)

render(
<Provider store = {store}>
<App />
</Provider>,

rootElement
)

Step 6 – Root Component

The App component is the root component of the app. Only the root component should be aware of a redux. The important part to notice is the connect function which is used for connecting our root component App to the store.
This function takes select function as an argument. Select function takes the state from the store and returns the props (visibleTodos) that we can use in our components.
App.jsx
import React, { Component } from ‘react’
import { connect } from ‘react-redux’
import { addTodo } from ‘./actions/actions’

import AddTodo from ‘./components/AddTodo.js’
import TodoList from ‘./components/TodoList.js’

class App extends Component {
render() {
const { dispatch, visibleTodos } = this.props

return (
<div>
<AddTodo onAddClick = {text =>dispatch(addTodo(text))} />
<TodoList todos = {visibleTodos}/>
</div>
)
}
}
function select(state) {
return {
visibleTodos: state.todos
}
}
export default connect(select)(App);

Step 7 – Other Components

These components shouldn’t be aware of redux.
components/AddTodo.js
import React, { Component, PropTypes } from ‘react’

export default class AddTodo extends Component {
render() {
return (
<div>
<input type = ‘text’ ref = ‘input’ />

<button onClick = {(e) => this.handleClick(e)}>
Add
</button>
</div>
)
}
handleClick(e) {
const node = this.refs.input
const text = node.value.trim()
this.props.onAddClick(text)
node.value = ”
}
}
components/Todo.js
import React, { Component, PropTypes } from ‘react’

export default class Todo extends Component {
render() {
return (
<li>
{this.props.text}
</li>
)
}
}
components/TodoList.js
import React, { Component, PropTypes } from ‘react’
import Todo from ‘./Todo.js’

export default class TodoList extends Component {
render() {
return (
<ul>
{this.props.todos.map(todo =>
<Todo
key = {todo.id}
{…todo}
/>
)}
</ul>
)
}
}
When we start the app, we will be able to add items to our list.

So, this brings us to the end of blog. This Tecklearn ‘How to implement flux pattern in React Applications’ blog helps you with commonly asked questions if you are looking out for a job in React JS and Front-End Development. If you wish to learn React JS and build a career in Front-End Development domain, then check out our interactive, React.js with Redux Training, that comes with 24*7 support to guide you throughout your learning period.

React.js with Redux Training

About the Course

Tecklearn’s React JS Training Course will help you master the fundamentals of React—an important web framework for developing user interfaces—including JSX, props, state, and events. In this course, you will learn how to build simple components & integrate them into more complex design components. After completing this training, you will be able to build the applications using React concepts such as JSX, Redux, Asynchronous Programming using Redux Saga middleware, Fetch data using GraphQL, perform Testing using Jest, successively Deploy applications using Nginx and Docker plus build Mobile applications using React Native. Accelerate your career as a React.js developer by enrolling into this React.js training.

Why Should you take React.js with Redux Training?

• The average salary for “React Developer” ranges from $100,816 per year to $110,711 per year, based on the role (Front End Developer/Full Stack Developer) – Indeed.com
• React Native Supports Cross-platform Development (iOS and Android), and it can reduce the development effort by almost 50% without compromising quality or productivity
• Currently, React JS is being used by major companies like Walmart, Netflix, and HelloSign.

What you will Learn in this Course?

Introduction to Web Development and React.js
• Fundamentals of React
• Building Blocks of Web Application Development
• Single-page and Multi-page Applications
• Different Client-side Technologies
• MVC Architecture
• Introduction to React
• Installation of React
• JSX and its use case
• DOM
• Virtual DOM and its working
• ECMAScript
• Difference between ES5 and ES6
• NPM Modules

Components, JSX & Props
• React Elements
• Render Function
• Components
• Class Component
• Thinking In Components
• What Is JSX
• JSX Expressions
• Creating Your First Component
• Functional Components

React State Management using Redux
• Need of Redux
• Redux Architecture
• Redux Action
• Redux Reducers
• Redux Store
• Principles of Redux
• Pros of Redux
• NPM Packages required to work with Redux
• More about react-redux package
React & Redux
• The React Redux Node Package
• Provider Component
• Connecting React Components with Redux Store
• Reducer Composition
• Normalization: Points to Keep in Mind When Designing a Redux Store
• Redux Middleware

React Hooks
• Caveat of JavaScript classes.
• Functional components and React hooks
• What are React hooks?
• Basic hooks
• useState() hook
• How to write useState() hook when state variable is an array of objects
• useEffect() hook
• Fetch API data using useEffect() hook
• useContext() hook
• Rules to write React hooks
• Additional hooks
• Custom hooks

Fetch Data using GraphQL
• What is GraphQL?
• Cons of Rest API
• Pros of GraphQL
• Frontend backend communication using GraphQL
• Type system
• GraphQL datatypes
• Modifiers
• Schemas
• GraphiQL tool
• Express framework
• NPM libraries to build server side of GraphQL
• Build a GraphQL API
• Apollo client
• NPM libraries to build client side of GraphQL
• How to setup Apollo client

React Application Testing and Deployment
• Define Jest
• Setup Testing environment
• Add Snapshot testing
• Integrate Test Reducers
• Create Test Components
• Push Application on Git
• Create Docker for React Application

Introduction to React Native
• What is React Native
• Use of JSX elements With React Native
• The anatomy of a React Native application
• React Native installation and setup
• Running the app on Android Simulator and Android Device
• Working with Styles and Layout
• Connecting React Native to Redux

React with Redux Projects

Got a question for us? Please mention it in the comments section and we will get back to you.

593