A lightweight state management inspired by Flux, Redux, based on the latest React Context API.
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci update deploy command Sep 16, 2018
examples update example Oct 19, 2018
screenshots add logger feature Sep 16, 2018
.gitignore auto generate declaration files Dec 29, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Sep 17, 2018
LICENSE Create LICENSE Sep 17, 2018
package.json remove dist director on git Dec 29, 2018
tsconfig.json auto generate declaration files Dec 29, 2018
yarn.lock update packages and types file Dec 29, 2018



npm version CircleCI PRs Welcome

A lightweight state management inspired by Flux, Redux, based on the latest React Context API.

SUPER simple and easy to build react, react-native application and flux architecture.

Following the Flux Architechture but with only one root Store:

Flux Simple Diagram


npm install --save react-recontext


yarn add react-recontext


  1. createStore(initialState, actionsCreators, enableLogger): of course, to create the app's root Store! 😗
    • initialState: vanilla or immutable js object, contains store default value.
    • actionsCreators: js object contains function to update store value
    • enableLogger: boolean flag for debugging
  2. <Provider />: wrap the root Component.
    • The root component usually is <App /> Component
  3. connect(mapStateToProps)(Component): connect React Component to Store, very easy to get value from store in any components.
    • mapStateToProps: a function to define which store values you want to inject into Component props
  4. dispatch(actionType, params): dispatch an event to update the Store value, from everywhere.
    • actionType: a string corresponding to the action name in actionsCreators
    • params: should be an object contains the value you want to update in �

Important and funny part:

You don't need to create action types anymore, all action type would be generated automatically. For example:

  • the actions creators:

      const actionsCreators = {
          addTodoItem: (state, { item }) => ({
              list: state.list.push(item)
  • change the action name from camel case into screaming snake case (addTodoItem => ADD_TODO_ITEM) then dispatch action.

      dispatch("ADD_TODO_ITEM", { item: item })


There are some examples app you can play with:


Only 3 steps to start with react-recontext

  1. Create store.js
import createStore from "react-recontext";

// create app initial state
const initialState = {
    todos: []

// create app actions, all action type would be generated automatically
const actionsCreators = {
    toggleItem: (state, { todoId }) => ({
        todos: state.todos.map(
            todo =>
                todo.id === todoId ? { ...todo, completed: !todo.completed } : todo

// enable logger for debugging
const enableLogger = __DEV__

// createStore required 3 params, and return a recontext store
const store =  createStore(initialState, actionsCreators, enableLogger);

// export store
export store
  1. Wrap root component with Provider
  • react:
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "./store";
import App from "./App";

    <App />
  • react-native + react-nativation
import { createStackNavigator } from "react-navigation";
import { Provider } from "./store";

const AppNavigator = createStackNavigator(...)

// wrap root component with <Provider /> that imported from recontext store
const App = () => (
        <AppNavigator />
  1. Connect component to get data and call action anywhere you want
import React from "react";
import Todo from "./Todo";
import { connect, dispatch } from "./store";

const TodoList = ({ todos }) => (
    {todos.map(todo => (
        onClick={() => dispatch("TOGGLE_ITEM", { todoId: todo.id })} // dispatch action type to update store value

const mapStateToProps = state => ({
  todos: state.todos

// connect component to get value from store
export default connect(mapStateToProps)(TodoList);


Supporting debugging by print all the store changes, example:

Logger Example