React Vuex Store

Vuex-style store wrapper for Redux

Important Notes

Find the complete release notes here.

Requirements

NodeJS

• NodeJS 10.X.X and above (from v0.18.0)

Installation

npm install react-vuex-store

Usage

Defining the Store

Store Module

import { ReactVuexStore } from 'react-vuex-store';
import { RootStoreState } from '.';

export type ModuleNameStoreState = {
    someStringVariable: string;
};

export default ReactVuexStore.createModule<ModuleNameStoreState, RootStoreState>({
    namespace: 'moduleName',
    state: {
        someStringVariable: 'default variable value',
    },
    mutations: {
        setSomeStringVariable(store, payload: ModuleNameStoreState['someStringVariable']) {
            store.exchange.someStringVariable = payload;
        }
    },
    actions: {
        asyncAction: async ({ commit }, payload: number): Promise<void> => {
            const someStringVariable = await Service.getStringValue(payload);
    
            commit<ModuleNameStoreState['someStringVariable']>({
                type: 'moduleName/setSomeStringVariable', 
                payload: someStringVariable
            });
        },
    },
});

Root Store Module

import moduleNameStore, { ModuleNameStoreState } from './ModuleNameStore';
import { RootModulesType } from './react-vuex-store';

export type RootStoreState = {
    moduleName: ModuleNameStoreState;
};

export const RootModules: RootModulesType<RootStoreState> = {
    moduleName: moduleNameStore
};

Main Store Export

import { ReactVuexStore } from 'react-vuex-store';
import { RootModules as modules } from './RootStore';
import type { RootStoreState } from './RootStore';

export { connect } from 'react-redux';
export type { RootStoreState };


export default new ReactVuexStore<RootStoreState>(modules).createStore();

Connect to components

import React, { useEffect } from 'react';
import store, { connect, RootStoreState } from 'src/store';

interface Props {
    someStringVariable: RootStoreState['moduleName']['someStringVariable'];
}

const FunctionalComponent = (props: Props): JSX.Element => {
    useEffect(() => { 
        store.dispatchAction({type: 'moduleName/asyncAction', payload: 1})
    }, []);
    
    return <div>
        {props.someStringVariable}
    </div>;
}

export default connect((state: RootStoreState) => ({
    someStringVariable: state.moduleName.someStringVariable
}))(FunctionalComponent);