Implementing Flux in React JS | Updated 2024

88

Flux is an architectural pattern introduced by Facebook to handle data flow in web applications, particularly in React. It helps in creating a more predictable data flow and scalable applications by using a unidirectional data flow model. In this tutorial, we’ll walk through the basic concepts of Flux and how to implement it in a React application.

Setting Up Your React Environment

Before you start implementing Flux, make sure you have a React application environment ready. If you need to create a new project, you can use Create React App:

npx create-react-app react-flux-demo
cd react-flux-demo

Step by Step Guide Flux in React JS

Step 1: Install Flux

First, install the Flux library in your project:

npm install flux

Step 2: Set Up the Dispatcher

The Dispatcher is the central hub that manages all data flow in a Flux application. Create a new file called Dispatcher.js:

import { Dispatcher } from 'flux';
export default new Dispatcher();

Step 3: Create Actions

Actions are helper methods that facilitate passing data to the Dispatcher. In actions/ItemActions.js, define actions for creating and deleting items:

import Dispatcher from '../Dispatcher';
const ItemActions = {
  addItem(item) {
    Dispatcher.dispatch({
      actionType: 'ADD_ITEM',
      item
    });
  },

  deleteItem(itemId) {
    Dispatcher.dispatch({
      actionType: 'DELETE_ITEM',
      itemId
    });
  }
};

export default ItemActions;

Step 4: Create a Store

Stores contain the application state and logic. Their role is somewhat similar to a model in a traditional MVC, but they manage the state of many components. Create a new file stores/ItemStore.js:

import { EventEmitter } from 'events';
import Dispatcher from '../Dispatcher';

let _items = [];

function addItem(item) {
  _items.push(item);
}

function deleteItem(itemId) {
  _items = _items.filter(item => item.id !== itemId);
}

class ItemStore extends EventEmitter {
  constructor() {
    super();
    this.dispatchToken = Dispatcher.register(this.dispatcherCallback.bind(this));
  }

  getItems() {
    return _items;
  }

  dispatcherCallback(action) {
    switch(action.actionType) {
      case 'ADD_ITEM':
        addItem(action.item);
        this.emit('change');
        break;
      case 'DELETE_ITEM':
        deleteItem(action.itemId);
        this.emit('change');
        break;
      default:
        break;
    }
  }
}

export default new ItemStore();

Step 5: Connect React Components to the Store

Components need to listen to changes in the store and update themselves accordingly. Modify App.js to use the ItemStore and ItemActions:

import React, { useEffect, useState } from 'react';
import ItemActions from './actions/ItemActions';
import ItemStore from './stores/ItemStore';

function App() {
  const [items, setItems] = useState(ItemStore.getItems());

  useEffect(() => {
    ItemStore.on('change', handleItemsChange);
    return () => {
      ItemStore.removeListener('change', handleItemsChange);
    };
  }, []);

  function handleItemsChange() {
    setItems(ItemStore.getItems());
  }

  function addItem() {
    ItemActions.addItem({ id: Date.now(), name: 'New Item' });
  }

  function deleteItem(id) {
    ItemActions.deleteItem(id);
  }

  return (
    <div>
      <h1>Items</h1>
      <button onClick={addItem}>Add Item</button>
      {items.map(item => (
        <div key={item.id}>
          {item.name} <button onClick={() => deleteItem(item.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

export default App;

Conclusion

You’ve just set up a basic Flux architecture in your React application. This pattern can help manage complex data flows and state in larger applications, making your code more maintainable and scalable.

Flux in React JS- FAQs