View/Controller View


1.Introduction:

  • Controller views are really just React components.
  • this view listen to change events and retrieve the Application state/data from Stores. (from store to view)

Store to View Data Flow:(Event Firing & Event Listening)

Que.Now where the events are fired?

> Events are fired in stores, we will study event firing in stores.

Que. How views listen to these events?

>for this we use javascript event listeners.

Example:

TodoStore.on("change", this.getTodos);

Here,
TodoStore it’s a store object which we import from our store.
.on() – it’s a method that catches the event.
“change” – it’s an event name which we fire in our store.
this.getTodos – it’s a method which will be called after firing event.

here this.getTodos is used to get the list of all Data.

getTodos() {
    this.setState({
      todos: TodoStore.getAll(),
    });
  }


“Whenever a change event is fired then getTodos() will bring all data from the store and store it in local todos object in view.”

View to Store Data Flow:(from view -> actions->dispatcher-> store->view)

Now let’s learn how to send action to store

submitInput(){
   TodoActions.createTodo(this.state.text);
 }


>submitInput() is a method in view which gets called whenever the user hits add new language button.
>This method will call createTodo of our Action methods(remember we studied about this method in action part) & passes text entered by the user as argument.

import React from "react";

import Todo from "./Todo";
import * as TodoActions from "./actions/TodoActions";//action methods object
import TodoStore from "./stores/TodoStore";//store object

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);//Event Catching
  }

  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); //calling action method
 }
  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>
    );
  }
}



Now the cycle is

1.submit input from view. (By clicking add language)
2.this submit call createTodo() method of action.
3.createTodo() dispatch the action to the store.
4.dispatched action calls store’s registered method to add a new language(handleActions method of the store is registered to dispatcher hence it’s get called )
5.once added the new language to the store, the event gets fired
6.this event caught by the view and updates the view.