Summary & Source Code

Now that we have gone through each individual part of the Flux architecture, we should have a much better idea of how this architecture actually works.

Flux working summary:

1.All data flows through the dispatcher(central hub). Actions are provided to the dispatcher in an action creator method, actions are generated from user interactions with the views.
2.The dispatcher then invokes the callbacks that the stores have registered with it,
dispatching actions to all stores.
3.stores respond to whichever actions are relevant to the state they maintain.
4.The stores then emit a change event to alert the controller-views that a change to the data layer has occurred.
5.Controller-views listen for these events and retrieve data from the stores in an event handler.
6.The controller-views call their own setState() method, causing a re-rendering of themselves
and all of their descendants in the component tree.

website Image:

Source Code:

Use below link to get source code for React-Flux

https://github.com/alphacodingtricks/React-webdev99-projects.git

dispatcher.js [dispatcher]

import { Dispatcher } from "flux";

export default new Dispatcher;

TodoActions.js [Action]

import dispatcher from "../dispatcher";

export function createTodo(text) {
  dispatcher.dispatch({
    type: "CREATE_TODO",
    text,
  });
}

export function deleteTodo(id) {
  dispatcher.dispatch({
    type: "DELETE_TODO",
    id,
  });
}

TodoStore.js [Store]

import { EventEmitter } from "events";

import dispatcher from "../dispatcher";

class TodoStore extends EventEmitter {
  constructor() {
    super()
    this.todos = [
      {
        id: 113464613,
        text: "React JS"
      },
      {
        id: 235684679,
        text: "Angular JS"
      },
    ];
  }

  createTodo(text) {
    const id = Date.now();

    this.todos.push({
      id,
      text
    });

    this.emit("change");
  }

  getAll() {
    return this.todos;
  }

  handleActions(action) {
    switch(action.type) {
      case "CREATE_TODO": {
        this.createTodo(action.text);
        break;
      }
      case "RECEIVE_TODOS": {
        this.todos = action.todos;
        this.emit("change");
        break;
      }
    }
  }

}

const todoStore = new TodoStore;
dispatcher.register(todoStore.handleActions.bind(todoStore));

export default todoStore;

Controller View [View]

import React from "react";

import Todo from "./Todo";
import * as TodoActions from "./actions/TodoActions";
import TodoStore from "./stores/TodoStore";

export default class Todos extends React.Component {
  constructor() {
    super();
    this.getTodos = this.getTodos.bind(this);
    this.state = {
      todos: TodoStore.getAll(),
      text:""
    };
     this.addingInput = this.addingInput.bind(this); 
     this.submitInput = this.submitInput.bind(this); 
  }

  componentWillMount() {
    TodoStore.on("change", this.getTodos);
  }

  componentWillUnmount() {
    TodoStore.removeListener("change", this.getTodos);
  }

  getTodos() {
    this.setState({
      todos: TodoStore.getAll(),
    });
  }
addingInput(e) {  
  this.setState({text:e.target.value});
  
  } 
 submitInput(){
   TodoActions.createTodo(this.state.text);
 }
  render() {
    const { todos } = this.state;

    const TodoComponents = todos.map((todo) => {
        return <Todo key={todo.id} {...todo}/>;
    });
    
    return (
      <div>
        <h2>Programming Lanuages</h2>
        <ul>{TodoComponents}</ul>
         <input  
          type="text"  
          onChange={this.addingInput}/>  
        <input  
          type="button"  
          value="Add Languages"  
          onClick={this.submitInput}  
        />
      </div>
    );
  }
}