@pure180/re-con NPM

React Context Application State Management

This package provides a basic functionality to manage your react application state with the Facebook house made context API.

Working example: https://codesandbox.io/s/pure180-re-con-example-se718

I would appreciate any comment or suggestion, please let me know what you think.

Installation

npm i @pure180/re-con

yarn add @pure180/re-con

Usage

Create a file for all configurations that controls the state handling.

e.g.: ./src/State.ts

import {
  AppState,
  BaseState,
  createAppStateContext,
  createAppStateProvider,
  createSelectorHook,
  Middleware,
} from '@pure180/re-con';

// Enum values which describes all available state properties
export enum StateKeys {
  Item = 'item',
}

// Enum values that describes the actions for on reducer
export enum EnumActions {
  Change = 'change',
}

// Describes one state object
export type StateObject = {
  item: string;
};

// Describes the hole state object including the reducer.
export interface State {
  [StateKeys.Item]: BaseState<StateObject, EnumActions>;
}

// Create the application Context which we will use later to create the
// provider or gaining access to the whole State-Context object of your
// application.
export const AppContext = createAppStateContext<
  State,
  State[keyof State]['state'],
  EnumActions
>();

// Create the application state provider that gives the react element
// children the ability to access the application state.
export const AppStateProvider = createAppStateProvider<
  State,
  State[keyof State]['state'],
  EnumActions
>(AppContext);

// Create the selector hook which is able to access one state object
// including the dispatch function.
export const useSelector = (key: keyof State) =>
  createSelectorHook(AppContext)(key);

// Create a default state including your reducer
export const defaultState: AppState<
  State,
  State[keyof State]['state'],
  EnumActions
> = {
  [StateKeys.Item]: {
    reducer: (state, action) => {
      switch (action.type) {
        case EnumActions.Change:
          return {
            ...state,
            ...action.payload,
          };
        default:
          return state;
      }
    },
    state: {
      item: 'myValue',
    },
  },
};

// Create a middleware that should run after the state mutation
const middlewareAfterMutation: Middleware<State, State[keyof State]['state'], EnumActions> =
  (state, action) => [Timing.After, () => {
    if (action.type === EnumActions.Change) {
      state[StateKeys.Item].state.item = 'change value after mutation'
    }
    return state;
  }
];

export const middleware: Middleware<State, State[keyof State]['state'], EnumActions>[] = [
  middlewareAfterMutation,
];

Apply the State Context Provider to your application.

e.g.: ./src/index.tsx

import React, { useCallback } from 'react';

import {
  AppStateProvider,
  defaultState,
  EnumActions,
  middleware,
  StateKeys,
  useSelector,
} from './State';

const ComponentWithSelectorHook: React.FunctionComponent = () => {
  const [state, dispatch] = useSelector(StateKeys.Item);

  const handleClick = useCallback(() => {
    const item = 'New Item Value';

    dispatch({
      type: EnumActions.Change,
      payload: { ...state, item },
    });
  }, [dispatch, state]);

  return (
    <div>
      <p>{state.item}</p>
      <button onClick={handleClick}>Click to change the State</button>
    </div>
  );
};

export const AppWithStateContextProvider: React.FunctionComponent = () => (
  <AppStateProvider state={defaultState} middleware={middleware}>
    <ComponentWithSelectorHook />
  </AppStateProvider>
);

export default AppWithStateContextProvider;

Functions

Typedefs

Timing : enum

Kind: global enum
Read only: true
Properties

Name	Type
Timing.After	after
Timing.Before	before

createAppStateContext() ⇒ Context.<AppContextValue.<State, Item, ActionType>>

Kind: global function

useSelectorBase(Context, key) ⇒

Kind: global function
Returns: AppState, (action: ActionReturn<ActionType, Item>) => void - Returns a tuple of the selected state and the dispatch function

Param	Type	Description
Context	Context.<AppContextValue.<State, Item, ActionType>>	The state Context object
key	string	The key of the state property

createSelectorHook(Context) ⇒

Kind: global function
Returns: AppState, (action: ActionReturn<ActionType, Item>) => void - Returns a tuple of the selected state and the dispatch function

Param	Type	Description
Context	Context.<AppContextValue.<State, Item, ActionType>>	The state Context object

resolveMiddleware(timing, state, action, middleware) ⇒ AppState

Kind: global function

Param	Type
timing	Timing
state	AppState
action	ActionReturn
middleware	Array.<Middleware>

createAppStateProvider(Context) ⇒ React.FunctionComponent

Kind: global function

Param	Type	Description
Context	React.Context	Application state context

Action ⇒ ActionReturn

Kind: global typedef

Param	Type	Description
type	ActionType	the string / action type the reducer is acting on
payload	Payload	Object that mutates the State.

ActionReturn : Object

Kind: global typedef
Properties

Name	Type	Description
type	ActionType \| string	the string / action type the reducer is acting on
payload	Payload	Object that mutates the state

Actions : Object.<string, Action>

Kind: global typedef

BaseState : Object

Kind: global typedef
Properties

Name	Type	Description
reducer	Reducer	the reducer to mutate the state
state	Object \| Array \| String	the state object

AppState : Object.<string, BaseState>

Kind: global typedef

AppStateProviderProps : Object

Kind: global typedef
Properties

Name	Type	Description
log	boolean	Should log the application state to the console.
middleware	Array.<Middleware> \| undefined	Array of middleware functions that
state	AppState	Object that holds the default state.