MVVM framework for react

This is a MVVM based framework for react developer, It makes react application development simpler, faster, and easier to test, Say goodby to setstate() and Redux. Simply create productivity! right? Enjoy the fun of your coding.

Components Overview

 view -------> viewmodel ----> model ---> service ---> Network
   |               |                         |
   |               |                         |
BaseComponent   BaseStore                BaseService

All views component extends BaseComponent
All viewmodels extends BaseStore
All services extends BaseService

Framework encapsolate HTTP get/post/put/delete method, provide network data cache service, network request management, state management and debug/log management, developer just extends BaseX class,focus on business code implementation, architecture design layered and easy to do test.

Provider for current React application

Provider inject store object to App, just change application index.js

// ...
//begin adapt
import { Store, configure, appProvider } from "react-alix";
import { todoStore, counterStore } from "./viewmodel";

//framework config options:
const configOptions = {
  debug: true,
  network: {
    debug: true,
    networkConfig: {
      timeout: 10000,
      headers: {
        "Content-Type": "application/json;charset=UTF-8"
      }
    }
  },
  service: {
    debug: true
  },
  viewmodel: {
    debug: true
  },
  view: {
    debug: true
  }
};

configure(configOptions);
//or use addStores({todoStore,counterStore}), todoStore, conterStore defined in viewmodel
const store = new Store().addStores({ todoStore }).addStores({ counterStore });

//monitor state change for debug
todoStore.subscribe(() => {
  console.log(
    "Subscribe triggered by current state changed:",
    todoStore.getState()
  );
});

const AppRoot = appProvider("store", store, App);
// ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(AppRoot, document.getElementById("root"));
// end adapt

create service for network API

Service class extends BaseService which provide http request management.

import { BaseService } from "react-alix";
const TODO_SERVICE_URL = "https://jsonplaceholder.typicode.com/todos";
const TODO_SERVICE_POST_URL = "https://jsonplaceholder.typicode.com/todos";

export default class TodoService extends BaseService {
  //
  async getData(params = {}, options = { cache: false }) {
    let { cache, ...networkOptions } = options;
    return this.getDataFromCache(
      TODO_SERVICE_URL,
      cache,
      params,
      networkOptions
    );
  }
  //
  async postData(params = {}, options = {}) {
    return this.post(TODO_SERVICE_POST_URL, params, options);
  }
  // other methods, i.e putData(...), deleteData()
}

create viewmodel

viewmodel extends BaseStore. the store is a simple js class, they have properties track view state(like react state/setstate),UI view component trigger store actions, the actions change store properties, then framework trigger view render() method, response to UI. the store communicate with remote API server by this.getService method. viewmodel decoupled UI View,remote server API and business data process, make testing more easier.

import { TodoService } from "../../service";
import { BaseStore } from "react-alix";
import Todo from "../../model/Todo";
class TodoStore extends BaseStore {
  isLoading = false;
  dataList = [];
  errorMessage = null;
  currentPage = 1;
  newInputValue = "";
  isEditMode = false;
  editingTodo = null;

  setIsLoadingAction = isLoading => (this.isLoading = isLoading);
  setDataListAction = dataList => (this.dataList = dataList);
  setErrorMessageAction = msg => {
    this.errorMessage = msg;
  };
  setNewValue = v => {
    this.newInputValue = v;
    if (this.newInputValue === "") {
      this.isEditMode = false;
      this.editingTodo = null;
      this.debug("end editing");
    }
  };

  setEditModeAction = todo => {
    this.editingTodo = todo;
    this.newInputValue = todo.title;
    this.isEditMode = true;
  };

  nextPageAction = () => {
    this.currentPage = this.currentPage + 1;
    this.debug("nextPage called", this.currentPage);
    this.queryDataAction(this.currentPage);
  };

  prePageAction = () => {
    this.currentPage = this.currentPage - 1;
    this.currentPage = this.currentPage <= 0 ? 1 : this.currentPage;
    this.debug("prePage called", this.currentPage);
    this.queryDataAction(this.currentPage);
  };


  //...other methods

  queryDataAction(pageNumber = 1) {
    this.setErrorMessageAction(null);
    let service = this.getService(TodoService);
    this.setIsLoadingAction(true);
    service
      // .getData({ cache: false })
      .getData({ _page: pageNumber }, { cache: true, timeout: 6000 })
      .then(data => {
        if (data !== undefined) {
          // convert to model object
          const todoList = data.map(item => new Todo(item));
          this.groupRunActions(() => {
            this.setDataListAction(todoList);
            this.setIsLoadingAction(false);
          });
        }
      })
      .catch(error => {
        this.groupRunActions(() => {
          this.setErrorMessageAction(error.message);
          this.setDataListAction([]);
          this.setIsLoadingAction(false);
        });
      });
  }
}

export default TodoStore;

//viewmodel index.js file connect store to framework state management.

import { decorate, observable, action } from "react-alix";
import TodoStore from "./TodoStore";
decorate(TodoStore, {
  isLoading: observable,
  currentPage: observable,
  newInputValue: observable,
  errorMessage: observable,
  dataList: observable,
  setIsLoadingAction: action,
  setDataListAction: action,
  setErrorMessageAction: action,
  setNewValue: action,
  addAction: action,
  prePageAction: action,
  nextPageAction: action
});

export default new TodoStore();

create view

view extends BaseComponent, get store object by props(injected by appProvider), dispatch action to store.

import React from "react";
import { BaseComponent } from "react-alix";
import AddEditForm from "../../component/Todo/AddEditForm";
import TodoList from "../../component/Todo/TodoList";

class Todo extends BaseComponent {
  store = this.props.store.todoStore;

  componentDidMount = () => {
    super.componentDidMount();
    this.dispatch(this.store, "queryDataAction", 1);
  };

  render() {
    this.debug("render called:", this.store, this.store.isLoading);

    const title = (
      <h2 className="title">Todo List Demo(View-ViewModel-Service-Network)</h2>
    );

    const todoList = (
      <div>
        <AddEditForm
          value={this.store.newInputValue}
          onChange={this.onChange}
          onSubmit={e => this.onSubmit(e)}
          store={this.store}
        />
        <TodoList
          store={this.store}
          list={this.store.dataList}
          onDelete={x => this.dispatch(this.store, "deleteAction", x)}
        />
        {this.store.dataList.length !== 0 && (
          <div className="todoBottomButton">
            <button
              type="button"
              onClick={() => this.dispatch(this.store, "prePageAction")}
            >
              Previous
            </button>
            {this.store.currentPage}
            <button
              type="button"
              onClick={() => this.dispatch(this.store, "nextPageAction")}
            >
              Next
            </button>

            <div>{""}</div>
          </div>
        )}
      </div>
    );

    const errorLabel = (
      <p style={{ color: "red", margin: "20px" }}>{this.store.errorMessage}</p>
    );

    return (
      <div className="todoBox">
        {title}
        {this.store.isLoading ? "Loading" : todoList}
        {this.store.errorMessage != null && errorLabel}
      </div>
    );
  }

  componentWillUnmount = () => {
    super.componentWillUnmount();
    //other logic
  };

  onChange = e => {
    this.debug(e.target.value);
    this.dispatch(this.store, "setNewValue", e.target.value);
  };

  onSubmit(event) {
    event.preventDefault();
    if (this.store.isEditMode) {
      this.dispatch(this.store, "editAction");
    } else {
      this.dispatch(this.store, "addAction");
    }
  }
}

export default Todo;

//view index.js inject store and observer view component
import { injectObsever } from "react-alix";
import component from "./Todo";
export default injectObsever("store", component);

Example project directory

.
├── App.js
├── App.test.js
├── component
│   │   ├── Header.jsx
│   │   └── Todo
│   │       ├── AddEditForm.jsx
│   │       ├── TodoItem.jsx
│   │       └── TodoList.jsx
│   │
├── config
│   └── config.js
├── index.js
├── logo.svg
├── service
│   ├── TodoService.js
│   ├── index.js
│   └── service.test.js
├── view
│   ├── Counter
│   │   ├── Counter.jsx
│   │   ├── Counter.test.js
│   │   └── index.js
│   ├── Main.jsx
│   └── Todo
│       ├── Todo.jsx
│       └── index.js
├── model
│   └── Todo
│      ├── TodoItem.js
│      └── index.js
└── viewmodel
    ├── CounterStore
    │   ├── CounterStore.js
    │   ├── counterstore.test.js
    │   └── index.js
    ├── TodoStore
    │   ├── TodoStore.js
    │   ├── TodoStore.test.js
    │   └── index.js
    ├── index.js
    └── viewmodel.tes.js

Demo code

https://github.com/alix2013/react-alix-demo