react-vivy

React bindings for Vivy based on react-redux. It exports all components and hooks from react-redux, and also exports the custom hooks for Vivy.

Docs

• Installation
• Examples
  • Examples in repository
  • Complete and real project example
• Documentation
  • Basic usage
  • Hooks
    • useModel
    • useStoreState
    • useModelState
    • useModelActions
    • useGlobalReducers

Installation

Using npm:

$ npm install vivy react-vivy

Examples

Examples in repository

$ cd ./examples/[EXAMPLE_NAME]
$ npm run start

Example names:

• calculation

Complete and real project example

• labor-analgesia-frontend

Documentation

Basic usage

import React from 'react';

// Import hook "useModel"
import {useModel} from 'react-vivy';

const App = () => {

    // Get model state and actions/reducers using hook "useModel".
    const [modelState, modelActions] = useModel('YOUR_MODEL_NAME_SPACE');

    // "useModel" can also accept a model as an argument.
    // import model from 'path_to_your_model';
    // const [modelState, modelActions] = useModel(model);

    // "useModel" can also accept a function as an argument.
    // const [modelState, modelActions] = useModel(state => state.your_model_name_space);

    // Get some value from modelState.
    const {value} = modelState;

    // Get some actions or reducers from modelActions.
    const {updateValue} = modelActions;

    return (
        <input value={value}
               onChange={e => updateValue({value: e.target.value})}/>
    );

};

export default App;

Hooks

useModel

1. Get model by model name space

import {useModel} from 'react-vivy';

// Get model state, actions and reducers
const [modelState, modelActions] = useModel('YOUR_MODEL_NAME_SPACE');

2. Get model by model

import {useModel} from 'react-vivy';
import model from 'path_to_your_model';

// Get model state, actions and reducers
const [modelState, modelActions] = useModel(model);

3. Get model by callback function

import {useModel} from 'react-vivy';

// Get model state, actions and reducers
const [modelState, modelActions] = useModel(state => state.your_model_name_space);

useStoreState

import {useStoreState} from 'react-vivy';

// Get store state
const storeState = useStoreState();

useModelState

1. Get model state by model name space

import {useModelState} from 'react-vivy';

// Get model state
const modelState = useModelState('YOUR_MODEL_NAME_SPACE');

2. Get model state by model

import {useModelState} from 'react-vivy';
import model from 'path_to_your_model';

// Get model state
const modelState = useModelState(model);

3. Get model state by callback function

import {useModelState} from 'react-vivy';

// Get model state
const modelState = useModelState(state => state.your_model_name_space);

useModelActions

1. Get model actions by model name space

import {useModelActions} from 'react-vivy';

// Get model actions and reducers
const modelActions = useModelActions('YOUR_MODEL_NAME_SPACE');

2. Get model actions by model

import {useModelActions} from 'react-vivy';
import model from 'path_to_your_model';

// Get model actions and reducers
const modelActions = useModelActions(model);

3. Get model actions by callback function

import {useModelActions} from 'react-vivy';

// Get model actions and reducers
const modelActions = useModelActions(state => state.your_model_name_space);

useGlobalReducers

import {useGlobalReducers} from 'react-vivy';

// Get all global reducers
const globalReducers = useGlobalReducers();