Defining the model

The model will be defined by the initial state and reducers, just like plain redux.

The main difference is that redux-mvc will dynamically create getters and actions for you.

Getters
Setters
Reducers
Actions

iniState

Getters

For each property key in the initial state a getter function will be created:

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

const model = createModel({
    iniState: {
      count: 0,
    },
    namespace: "Counter",
})

will generate a count getter (selector) to get the count out of the current state

import { connect } from "@redux-mvc/core"
import { getters } from "./model"

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

const Counter = ({

Setters

Similar to the getters, for each property key of the initial state a setter function will be created:

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

const model = createModel({
    iniState: {
      count: 0,
    },
    namespace: "Counter",
})

will generate a count setter (action) to set the count out of the current state

import { connect } from "@redux-mvc/core"
import { actions } from "./model"

const decorate = connect(
    ...
    {
        setCount: e => actions.setCount(Number(e.target.value)),
    }
)

Note: Check that the setters will be prefixed with set. E.g.: for the count key the setter would be setCount.

Reducers

The module reducer will be created out of a collection of reducer functions:

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

const model = createModel({
    reducers: {
        add: ({ count }) => ({ count: count + 1 }),
        reset: R.always(iniState),
    },
    ...
})

The reducers will take state and action as parameters, and they will return the partial state to be updated.
The returned partial state will be shallow merged with the previous state.

Actions

redux-mvc will also dynamically create one action creator for each reducer function.

Given this model

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

const model = createModel({
    reducers: {
        add: ({ count }) => ({ count: count + 1 }),
        reset: R.always(iniState),
    },
    ...
})

add and reset actions will be dynamically generated and can later be used in views:

import { connect } from "@redux-mvc/core"
import { actions } from "./model"

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

const Counter = ({

Edit this page on GitHub

Architecture

Model Definition: Docs