@nulliel/store v1.0.3

An opinionated and type safe implementation of redux

Description

redux-ts uses the same action -> dispatch -> reducer model popularized by redux.

Installation

redux-ts currently relies on react >= 16.8 for hooks support.

npm install --save redux-ts react@latest

...

Actions

An action is a data object used to describe state changes to the store. In its simplest form, an action has the following shape:

const action = {
    type: "SET_NAME",
    data: {
        name: "Michael"
    }
}

In @nulliel/store actions are created through the use of action creators. An action creator is a function that returns an action.

Action creators are created through the createAction function. It is important to use this function instead of creating your own as it stores important internal metadata about the action and reducers it is bound to.

import { createAction } from "@nulliel/store"

const action = createAction("setName", (name: string) => ({ name }))

The second argument to createAction is a function that takes up to 6 parameters and must return an object containing the action data.

See the redux documentation for an alternate explanation

Notes

• Action names must be unique across a project. Duplicate action names will throw an exception.
• Action names must match the following pattern /^[a-zA-Z0-9_/]+$/

Reducers

Store

The store is an object responsible for unifying actions and reducers. The store has the following responsibilities:

• Holds application slices
• Adds slices to the store via wrapReducer()
• Allows access to state via resolve()
• Allows state to be updated vis dispatch(action)

What is a slice?

Compared to Redux, the store does not hold the application state. This job is instead deferred to a Slice, which is a wrapper around a reducer and its state.

Slices expose the following API:

• subscribe()
• resolve()

Middleware

API

resolve

dispatch

The store is responsible for unifying actions and reducers. The store is responsible for the following:

• Holding the application state
• Resolving slices through resolve

API

redux-ts is intended for use with react using hooks. To initialize the store, use a StateProvider.

StateProvider

The StateProvider component creates the store automatically under the hood. This component allows for us to interact with the store through react's hooks system.

export default RootComponent = () => (
    <StateProvider>
        // children
    </StateProvider>
)

Middleware can be passed to the store through the middleware prop.

export default RootComponent = () => (
    <StateProvider middleware={[devTool, logger]}>
        // children
    </StateProvider>
)

createAction(name: string, payloadReducer: (...args) => any)

Creates an action creator. This will be used to bind actions to reducers.
This returns an action creator similar to the form of payloadReducer but returning an Action instead of any

interface Action<P> {
    type: string; // createAction name argument
    payload: P;   // createAction payloadReducer return type

TODO

• Rename library
• Split into multiple libraries using lerna (redux-ts, redux-ts-hooks, redux-ts-devtools)

License

redux-ts is MIT Licensed.