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

1npm install react-vuex-store

Usage

Defining the Store

Store Module

1import { ReactVuexStore } from 'react-vuex-store';
2import { RootStoreState } from '.';
3
4export type ModuleNameStoreState = {
5    someStringVariable: string;
6};
7
8export default ReactVuexStore.createModule<ModuleNameStoreState, RootStoreState>({
9    namespace: 'moduleName',
10    state: {
11        someStringVariable: 'default variable value',
12    },
13    mutations: {
14        setSomeStringVariable(store, payload: ModuleNameStoreState['someStringVariable']) {
15            store.exchange.someStringVariable = payload;
16        }
17    },
18    actions: {
19        asyncAction: async ({ commit }, payload: number): Promise<void> => {
20            const someStringVariable = await Service.getStringValue(payload);
21    
22            commit<ModuleNameStoreState['someStringVariable']>({
23                type: 'moduleName/setSomeStringVariable', 
24                payload: someStringVariable
25            });
26        },
27    },
28});

Root Store Module

1import moduleNameStore, { ModuleNameStoreState } from './ModuleNameStore';
2import { RootModulesType } from './react-vuex-store';
3
4export type RootStoreState = {
5    moduleName: ModuleNameStoreState;
6};
7
8export const RootModules: RootModulesType<RootStoreState> = {
9    moduleName: moduleNameStore
10};

Main Store Export

1import { ReactVuexStore } from 'react-vuex-store';
2import { RootModules as modules } from './RootStore';
3import type { RootStoreState } from './RootStore';
4
5export { connect } from 'react-redux';
6export type { RootStoreState };
7
8
9export default new ReactVuexStore<RootStoreState>(modules).createStore();

Connect to components

1import React, { useEffect } from 'react';
2import store, { connect, RootStoreState } from 'src/store';
3
4interface Props {
5    someStringVariable: RootStoreState['moduleName']['someStringVariable'];
6}
7
8const FunctionalComponent = (props: Props): JSX.Element => {
9    useEffect(() => { 
10        store.dispatchAction({type: 'moduleName/asyncAction', payload: 1})
11    }, []);
12    
13    return <div>
14        {props.someStringVariable}
15    </div>;
16}
17
18export default connect((state: RootStoreState) => ({
19    someStringVariable: state.moduleName.someStringVariable
20}))(FunctionalComponent);