Standalone-store NPM

Standalone Store

Middleware for redux store in standalone mode for nodejs environment

Getting Started

Motivation

Nowadays many websites use SPA architecture:

More and more JavaScript is being used. A lot of code on the client side. Some code can be shared with back-end.

These instructions will let you know how to use the library.

Prerequisites

Things you need to install before using this library.

node: 10.15.0
nvm: 0.33.6

Installing

Using npm:

npm i --save standalone-store

Using yarn:

yarn add --dev standalone-store

Usage

Once you have instanciated your store, you can use standalone-store as a middleware.

If you don't know what is configureStore take a look at redux documentation (https://redux.js.org/recipes/configuring-your-store#the-solution-configurestore).

In addition to redux documentation, configureStore need a parameter.

type ConfigureStore = ({ middlewares }: { middlewares: Middleware[] }) => ReturnType<StoreCreator>

Simple

Callback

const getUser = () => {
  return dispatchActionsAndWaitResponse({
    actionsDispatch: [getUser(payload)],
    actionCreatorsResolve: [getUser]
    configureStore,
    selector: userSelector,
  })
  .then(data => {
    console.log(data)
  })
  .catch(error => {
    console.log(error)
  })
  .finally(() => {
    console.log('done')
  })
}

Async / Await

const getUser = async () => {
  try {
    const data = await dispatchActionsAndWaitResponse({
      actionsDispatch: [getUser(payload)],
      actionCreatorsResolve: [getUser],
      configureStore,
      selector: userSelector,
    })
    console.log(data)
  }
  catch (error) {
    console.log(error)
  }
  finally {
    console.log('done')
  }
}

Advanced

const standaloneStore = new StandaloneStore<TState>({ configureStore })

Dispatch an redux action

For example we have an action getUser, we want to display this action with a payload.

const payload = { userId: '1234' }
standaloneStore.dispatchAction(getUser(payload))

Get all listeners

standaloneStore.getListeners()

Subscribe to an event

import { isActionOf } from 'typesafe-actions'

standaloneStore.subscribe((action, state) => {
  if (isActionOf(getUser, action)) {
    console.log({ action, state })
  }
})

Unsubscribe to all event

standaloneStore.unsubscribe()

Migration Guides

v0.1.x to v1.x.x

ConfigureStore has been added with specific parameter, normally it should be a function which encapsulates store creation logic, in addition of that, it can accept a list of middleware to be applied.

If you don't need to add any extra middleware, just pass an empty array (configureStore({ middlewares: []})).
Make sure your configureStore match with given type.

type ConfigureStore = ({ middlewares }: { middlewares: Middleware[] }) => ReturnType<StoreCreator>

Breaking changes:

`dispatchActionsAndWaitResponse`

In v1.x.x, parameterstore was replace by configureStore;

// before
dispatchActionsAndWaitResponse({
  actionsDispatch: [getUser(payload)],
  actionCreatorsResolve: [getUser]
  store: configureStore(),
  selector: userSelector,
})

// after
dispatchActionsAndWaitResponse({
  actionsDispatch: [getUser(payload)],
  actionCreatorsResolve: [getUser]
  configureStore,
  selector: userSelector,
})

Standalone Store

In v1.x.x functions below are deprecated;

standaloneStore.listenersPop
standaloneStore.listenersClear has been replaced by unsubscribe

StandaloneStore take a method configureStore as parameter, store was removed. Pay attention about the type of configureStore.

// before
const store = configureStore()
const standaloneStore = new StandaloneStore<TState>({ store })

// after
const standaloneStore = new StandaloneStore()<TState>({ configureStore })