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.

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

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

Breaking changes:

dispatchActionsAndWaitResponse

1. 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

1. In v1.x.x functions below are deprecated;

• standaloneStore.listenersPop
• standaloneStore.listenersClear has been replaced by unsubscribe

2. 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 })

Running the tests

Tests are written with jest

Unit tests

Using jest:

yarn run test

Deployment

Deployment is done with Travis.

Built With

• TSDX - TSDX

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Arnaud Zheng - Initial work - arnaud-zg

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details