What are the differences between Redux and Flux in ReactJS ?
Last Updated :
06 Jul, 2023
During the phase of applications or software development, we gather the requirements of customers to create a solution to solve the problem of customers or businesses. To solve problems we rely on different technologies and architecture patterns. for a long time, developers were using MVC (Model-View-Controller) pattern. As we know that after every month new technologies come into the market with new features which replace previous ones. So the same way development team of Facebook come up with important changes and release flux which becomes an alternative option for MVC architecture. and after flux, there has been another framework Redux comes into the market. Let’s discuss Redux vs Flux in this article.
Flux: Flux is the application architecture or we can say JavaScript architecture that uses for building client-side web applications or UI for client applications. you can start using flux without a lot of new code. flux overcome the drawbacks of MVC such as instability and complexity.
Example: In this example, we create a TODO list application. This example contains functionality that you can add a task in the TODO list along with you can remove the list of tasks.
Step 1: Create a new react app using the below commands.
devendra@root:~/Desktop$ npx create-react-app todoapp
devendra@root:~/Desktop/todoapp$ npm install redux react-redux –save
Step 2: Create a folder structure in your code editor as given below in the screenshot you can create files manually or using commands as well.
Project Structure:
todo app folder structure
Step 3 (Actions): Actions are things that happen during the lifetime of your application. In our application when the user clicks on create button a function CRAETE_TODO will call and a new task will be added to the list. The same DELETE_TODO function will perform a delete action when the Delete button is clicked. This is an example of the Action component.
TodoActions.js
Javascript
import dispatcher from "../dispatcher";
export function createTodo(text) {
dispatcher.dispatch({
type: "CREATE_TODO",
text,
});
}
export function deleteTodo(id) {
dispatcher.dispatch({
type: "DELETE_TODO",
id,
});
}
|
Step 4: Dispatchers
Think of the Dispatcher as a router. Actions are sent to the Dispatcher who calls the appropriate callbacks.
dispatcher.js
Javascript
import { Dispatcher } from "flux";
export default new Dispatcher;
|
Step 5 (Store):
A 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.
Javascript
import { EventEmitter } from 'events';
import dispatcher from '../dispatcher';
class TodoStore extends EventEmitter {
constructor() {
super();
this.todos = [
{
id: 16561,
text: 'hello'
},
{
id: 16562,
text: 'another todo'
},
];
}
createTodo(text) {
const id = Date.now();
this.todos.push({
id,
text
});
this.emit('change');
}
deleteTodo(id) {
this.todos = this.todos.filter((elm) => {
return (elm.id != id);
});
this.emit('change');
}
getAll() {
return this.todos;
}
handleActions(action) {
switch (action.type) {
case 'CREATE_TODO': {
this.createTodo(action.text);
break;
}
case 'DELETE_TODO': {
this.deleteTodo(action.id);
break;
}
}
}
}
const todoStore = new TodoStore();
dispatcher.register(todoStore.handleActions.bind(todoStore));
export default todoStore;
|
Step 6 (Root Component): The index.js 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 a select function as an argument. The select function takes the state from the store and returns the props (visibleTodos) that we can use in our components.
Todolist.js
Javascript
import React from 'react';
import Todo from '../components/Todo';
import TodoStore from '../stores/TodoStore.js';
import * as TodoActions from '../actions/TodoActions';
export default class Todolist extends React.Component {
constructor() {
super();
this.state = {
todos: TodoStore.getAll(),
};
this.inputContent = '';
}
componentWillMount() {
TodoStore.on("change", () => {
this.setState({
todos: TodoStore.getAll(),
});
});
}
render() {
const TodoComp = this.state.todos.map(todo => {
return <Todo key={todo.id} {...todo} />;
});
return (
<div>
<h1> GFG Todo list</h1>
<input type="text" onChange=
{(evt) => this.inputContent = evt.target.value} />
<button onClick={() => TodoActions
.createTodo(this.inputContent)}>Create!</button>
<ul>{TodoComp}</ul>
</div>
);
}
}
|
Step 7: Now we will delete the task component.
Todo.js
Javascript
import React from "react";
import * as TodoActions from '../actions/TodoActions';
export default class Todo extends React.Component {
render() {
return (
<li>
<span>{this.props.text}</span>
<button onClick={() => TodoActions
.deleteTodo(this.props.id)}>delete</button>
</li>
);
}
}
|
Step 8: Other components
index.js
Javascript
import React from 'react';
import { render } from 'react-dom';
import Todolist from './pages/Todolist';
const app = document.getElementById('root');
render(<Todolist />, app);
|
Step to run application: Open the terminal and type the following command.
npm start
Output:Create button will add a task to Todo list, similarly Delete button removes the task from the Todo list
Redux: Redux is a predictable state container for JavaScript apps. Dan Abramov & Andrew Clark developed Redux in 2015. Redux itself library that can be used with any UI layer or framework, including React, Angular, Ember, and vanilla JS. Redux can be used with React. both are independent of each other. Redux is a state managing library used in JavaScript apps. It simply manages the state of your application or in other words, it is used to manage the data of the application. It is used with a library like React.
Example: Now we will see a simple example counter using react-redux. In this example we store a state of button clicks and used that states for further buttons to click for example we create four buttons increment (+), decrement (-), increment if odd, increment async.
- increment (+), decrement (-): these two buttons will increment click by +1 and -1
- increment if odd: this button will only increment click if previous two buttons (+)and (-) click is odd i.e. if the click is 7 then only this button will increment by +1 and now clicks will be 8 otherwise this will not increment if previous buttons (+) and (-) clicks were 6 because 6 is even and increment if odd button only clicks when the previous state is odd click.
- increment async: This button will increment click after halt or wait of 1000 mili. sec.
Below is the step by step implementation:
Step 1: Create a new react app using the below commands.
npx create-react-app counterproject
npm install redux react-redux --save
Step 2: Create all required Files and Folders.
Project Structure: It will look like the following.
files and folders
Step 3: Counter.js is a Presentational Component, which is concerned with how things look such as markup, styles. It receives data and invokes callbacks exclusively via props. It does not know where the data comes from or how to change it. It only renders what is given to them. This is the root component for the counter to render everything in UI.
Counter.js
Javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Counter extends Component {
constructor(props) {
super(props);
this.incrementAsync = this.incrementAsync.bind(this);
this.incrementIfOdd = this.incrementIfOdd.bind(this);
}
incrementIfOdd() {
if (this.props.value % 2 !== 0) {
this.props.onIncrement()
}
}
incrementAsync() {
setTimeout(this.props.onIncrement, 1000)
}
render() {
const { value, onIncrement, onDecrement } = this.props
return (
<p>
<h1>GeeksForGeeks Counter Example</h1>
Clicked: {value} times
{' '}
<button onClick={onIncrement}>
+
</button>
{' '}
<button onClick={onDecrement}>
-
</button>
{' '}
<button onClick={this.incrementIfOdd}>
Increment if odd
</button>
{' '}
<button onClick={this.incrementAsync}>
Increment async
</button>
</p>
)
}
}
Counter.propTypes = {
value: PropTypes.number.isRequired,
onIncrement: PropTypes.func.isRequired,
onDecrement: PropTypes.func.isRequired
}
export default Counter
|
Step 4: Counter.spec.js contains what to change when particular buttons of components are clicked.
Javascript
import React from 'react'
import { shallow } from 'enzyme'
import Counter from './Counter'
function setup(value = 0) {
const actions = {
onIncrement: jest.fn(),
onDecrement: jest.fn()
}
const component = shallow(
<Counter value={value} {...actions} />
)
return {
component: component,
actions: actions,
buttons: component.find('button'),
p: component.find('p')
}
}
describe('Counter component', () => {
it('should display count', () => {
const { p } = setup()
expect(p.text()).toMatch(/^Clicked: 0 times/)
})
it('first button should call onIncrement', () => {
const { buttons, actions } = setup()
buttons.at(0).simulate('click')
expect(actions.onIncrement).toBeCalled()
})
it('second button should call onDecrement', () => {
const { buttons, actions } = setup()
buttons.at(1).simulate('click')
expect(actions.onDecrement).toBeCalled()
})
it('third button should not call onIncrement if the counter is even', () => {
const { buttons, actions } = setup(42)
buttons.at(2).simulate('click')
expect(actions.onIncrement).not.toBeCalled()
})
it('third button should call onIncrement if the counter is odd', () => {
const { buttons, actions } = setup(43)
buttons.at(2).simulate('click')
expect(actions.onIncrement).toBeCalled()
})
it('third button should call onIncrement if the counter is
odd and negative', () => {
const { buttons, actions } = setup(-43)
buttons.at(2).simulate('click')
expect(actions.onIncrement).toBeCalled()
})
it('fourth button should call onIncrement in a second', (done) => {
const { buttons, actions } = setup()
buttons.at(3).simulate('click')
setTimeout(() => {
expect(actions.onIncrement).toBeCalled()
done()
}, 1000)
})
})
|
Step 4: Reducers
This is a reducer, a function that takes a current state value and an action object describing “what happened”, and returns a new state value. A reducer’s function signature is: (state, action) => newState. it means a reducer function takes two parameters state and action. The Redux state should contain only plain JS objects, arrays, and primitives. The root state value is usually an object. It’s important that you should not mutate the state object, but return a new object if the state changes. You can use any conditional logic you want in a reducer. In this example, we use a switch statement, but it’s not required.
index.js
Javascript
export default (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
|
Index.spec.js
Javascript
import counter from './index'
describe('reducers', () => {
describe('counter', () => {
it('should provide the initial state', () => {
expect(counter(undefined, {})).toBe(0)
})
it('should handle INCREMENT action', () => {
expect(counter(1, { type: 'INCREMENT' })).toBe(2)
})
it('should handle DECREMENT action', () => {
expect(counter(1, { type: 'DECREMENT' })).toBe(0)
})
it('should ignore unknown actions', () => {
expect(counter(1, { type: 'unknown' })).toBe(1)
})
})
})
|
Step 5: Store
All container components need access to the Redux Store to subscribe to it. For this, we need to pass it(store) as a prop to every container component. However, it gets tedious. So we recommend using a special React Redux component called which makes the store available to all container components without passing it explicitly. It is used once when you render the root component.
index.js
Javascript
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import Counter from './components/Counter'
import counter from './reducers'
const store = createStore(counter)
const rootEl = document.getElementById('root')
const render = () => ReactDOM.render(
<Counter
value={store.getState()}
onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
/>,
rootEl
)
render()
store.subscribe(render)
|
Step to run the application: Open the terminal and type the following command.
npm start
Output:
Difference between Redux and Flux:
| Sr.no |
Redux
|
Flux
|
| 1. |
It was developed by Dan Abramov & Andrew Clark. |
It was developed by Facebook. |
| 2. |
It is an Open-source JavaScript library used for creating the UI. |
It is Application architecture designed to build client-side web apps. |
| 3. |
Redux has mainly two components
|
Flux has main four components :
- Action
- Dispatcher
- Store
- View
|
| 4. |
Redux does not have any dispatcher. |
Flux has a single dispatcher. |
| 5. |
Redux has only a single store in the application. |
Flux has multiple stores in one application. |
| 6. |
In Redux, Data logics are in the reducers. |
In flux, Data logic is in store. |
| 7. |
In Redux store’s state cannot be mutable |
In flux store’s state can be mutable. |
| 8. |
 |
 |
Similar Reads
What is the difference between “(…);†and “{…}†in ReactJS ?
When you write JavaScript, you can use either the "(…)" or "{…}" pattern to define objects. In ReactJS, (...); and {...} are used in different contexts and have different purposes, and are used to denote different types of code structures. What is "(…);" in React JS ?In ReactJS, (...); is used to de
5 min read
What are the differences between props and state ?
In React JS, the main difference between props and state is that the props are a way to pass the data or properties from one component to other components while the state is the real-time data available to use within only that component. PrerequisitesReact JSReact StatesReact Js PropsKnowing the dif
4 min read
What is the difference between React Native and React?
React and React Native, created by Facebook, are popular tools for building user-friendly apps. React is mainly used for web applications, while React Native focuses on mobile apps. They share similar concepts, but each serves a unique purpose. Table of Content React vs React NativeWhat is React ?Wh
4 min read
What's the difference between forceUpdate vs render in ReactJS ?
In this article, we will learn about the difference between forceUpdate vs render in ReactJS. In ReactJS, both forceUpdate and render are related to updating the UI, but they serve different purposes. Table of Content render()forceUpdate()Difference between forceUpdate vs renderPrerequisites:NodeJS
2 min read
What's the difference between super() and super(props) in React ?
Before going deep into the main difference, let us understand what is Super() and Props as shown below: Super(): It is used to call the constructor of its parent class. This is required when we need to access some variables of its parent class.Props: It is a special keyword that is used in react sta
3 min read
What is the Difference Between a .js and .jsx File in React?
React is a JavaScript library used for building user interfaces, especially for single-page applications. It uses a component-based structure that makes development more efficient and maintainable. In React, different file extensions are used for specific purposes: .js or .jsx for JavaScript and JSX
4 min read
Difference between ReactJS and Vue.js
ReactJS: ReactJS is an open-source JavaScript library created by Facebook which is used to deal with the view layer for both Web and Mobile applications. It can be provided on the server-side along with working on the client-side. Features of ReactJS: Scalability: It is reasonable for enormous scale
2 min read
What are the differences between React.lazy and @loadable/components ?
Before discussing the difference between React.lazy and @loadable/components, let's talk about what are they and why we need them. Both React.lazy and @loadable/components are mainly being used for the process of Code-Splitting. Code-Splitting: Code-Splitting is an optimization technique supported b
4 min read
What's the difference between useContext and Redux ?
In React, useContext and Redux both approaches provide ways to manage and share state across components. Both work and manage global data to share and access from any component present in the application DOM tree, but they have different purposes and use cases. Table of Content useContext ReduxDiffe
5 min read
Difference between Flow and PropTypes in ReactJS
Flow is a Javascript extension to type-check your application while propTypes is the built-in type-checking ability of ReactJS. Their functionality may seem similar with a few differences. Table of Content FlowPropTypesFlow:Flow is a static type-checking tool for your application. When bigger-scale
3 min read