RedVue

RedVue is the Redux toolkit in a Style inspired by Vuex with heavy TypeScript Support.

Quick Start

Installing what you need

npm install -g npx
npm install redvue ts-node

TypeScript File

index.ts

import { createSlice, initStore} from 'redvue'

// Setup Slices
const counter = createSlice ({
    name: 'counter',
    state: { count: 0 },
    getters: { double: state => state.count * 2 },
    mutations: { addOne: state => state.count += 1 }
})

// Define App State Structure 
interface AppState {
    counter: typeof counter['IState']
}

// Initialize Store
const store = initStore()

// Getting State
store.subscribe(() => {
    const state = store.getState() as AppState
    console.log(state)
})

// Committing a Change to State
counter.commit.addOne()

Run It

npx ts-node index.ts

Output

{ counter: { count: 1, double: 2 } }

The Parts of Redvue

Redvue is the Redux toolkit with the flavor of Vuex with heavy Typescript support.

There are three major parts of the store. The Store itself, Slices of the store, and Middleware.

The Store

This is where you configure the store and set if you want the Redux Devtools enabled or middleware added.

const Store = configureStore({
  middleware: [middleware()],
  devTools: false
})

middleware

An Array of middleware functions that fire after each action.

devTools

This is a boolean value to enable the Redux devtools.

Slice

Slices are where you declare state and how you interact with the state.

interface product {
    stockcode: number,
    productname: string
}
// Setup Slices
const myStore = createSlice ({
    name: 'store', // Name of the slice
    state: { // The initial state
      products: [] as product[],
      sortBy: 'price'
    },
    getters: { // State values that change when a mutation is fired.
      filteredProducts (state) {
        const key = state.sortBy
        return state.products.sort((a,b) => a[key] - b[key])
      }
    },
    mutations: { // This is the only location changes to the state occur.
      addProducts (state, payload:product) {
        state.products.push(payload);
      }
    },
    actions: { // This is where you can do async calls
      getProducts () {
        fetch('/api/getProducts/')
        .then(res => res.json())
        .then(products => myStore.commit.addProducts(products))
      }
    }
  })

State

This is the initial value of the state.

Getters

In this case whenever any of the mutations fire for this slice the filteredProducts function is ran and a value call filteredProducts is appended to the state object with the returned value of this function.

So all that needs to be done is change sortBy to name and the filteredProducts will auto calculate the filtered values to be sorted by name vs price.

Mutations

These are functions that change state. Unlike Redux you can mutate the state like Vuex

Actions

These are just functions that can dispatch mutations at any time to handle async tasks like fetching an API.

Middleware

Events that will trigger after each action and be given the Redux action signature.

Example

Creation

// middleware/log file
import { logAction } from 'logSlice';
import { middleware } from 'RedVue';

export const logMiddleware = middleware((action) => {
  // So it won't trigger itself
  if (action.type !== 'log/insertLog') {
    // Log the Action
    logAction.commit.insertLog({
        timestamp: new Date(),
        action: action.type,
        payload: action.payload
    })
  }
})

Registering

// Store file
import {log} from 'middleware/log'

configureStore({
  middleware: [log],
  devTools: false
})

TypeScript Support

There are three major areas of TypeScript Support. Inside the slice, reading from the state, and interactions (actions and mutations).

Slices

When you create a slice as long as you are within the function itself the getters and mutations will know the state structure automatically.

Reading the State

The createSlice function return a IState object that you can get the state structure from. All you need to do is create a master state interface "AppState" and assign that to the output of state.getState() and all your state structure and getters will come along with it.

Interactions (Actions and Mutations)

The createSlice function returns the actions and commits which is how you run the mutations. As the function already knows what you entered into the function it will type check all the inputs for you.

Examples

In the Repo we have a Examples in the examples folder check them out.