Getting started

Installation and basic setup for the redux-mvc counter example.

Installation
Folder Structure
Model
View
Module
Context

Installation

npm install @redux-mvc/core

Dependencies

npm install redux react react-dom

Folder Structure

Counter
  | index.js // module file
  | model.js // model file
  | View 
    | index.js // context file
    | Counter.js // counter view file

Note: render the module by requiring Counter/View

Model

The model is the business logic layer where the state updates happen.

You can define the iniState and reducers in it and redux-mvc will dynamically generate actions and getters for you so you avoid writing a bit of boilerplate.

import { createModel } from "@redux-mvc/core"

const model = createModel({
    iniState: {
        count: 0,
    },
    reducers: {
        add: (state, action) => ({ count: state.count + 1 }),
        reset: (state, action) => ({ count: 0 }),

View

The view is the presentational layer. By using dependency injection we can keep it as stateless as possible.

import React from "react"
import { connect } from "@redux-mvc/core"

import { getters, actions } from "./model"

const decorate = connect(
    { count: getters.count },
    { add: actions.add, reset: actions.reset }
)

Module

The module is the configuration layer. In this case it adds lifecycle methods required by the context.

import { createModule } from "@redux-mvc/core"

import model from "./model.js"

const module = createModule(model)

export default module

Context

The context is where you run an instance of a module.

import React from "react"
import { createContext } from "@redux-mvc/core"

import module from "../index"
import Counter from "./Counter.js"

const decorate = createContext({
    module,
}),

Edit this page on GitHub

Home

Architecture