Home

Awesome

react-recontext

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

Installation

npm install --save react-recontext

or

yarn add react-recontext

Api

“Everything should be made as simple as possible, but no simpler.” - Einstein

const { Provider, Context, dispatch } = createStore(
  initialState,
  actionsCreators,
  enableLogger
);

Example

There are some examples you can play with:

Usage

Only 3 steps to start with react-recontext

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

export const { dispatch, Context, Provider } = createContext({
  displayName: "AppContext",
  initState: {
    todos: [],
  },
  actions: {
    TOGGLE_ITEM: (state, { todoId }) => ({
      todos: state.todos.map((todo) =>
        todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
      ),
    }),
  },
});
  1. Wrap root component with Provider
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "./store";
import App from "./App";

ReactDOM.render(
  <Provider>
    <App />
  </Provider>,
  document.getElementById("root")
);
import { createStackNavigator } from "react-navigation";
import { Provider } from "./store";

const AppNavigator = createStackNavigator(...)

// wrap root component with <Provider /> that imported from recontext store
const App = () => (
    <Provider>
        <AppNavigator />
    </Provider>
);
  1. Get data from store inside component by using React.useContext, and dispatch an action from anywhere you want
import React from "react";
import Todo from "./Todo";
import { Context, dispatch } from "./store";

const TodoList = () => {
  const { todos } = React.useContext(Context);

  return (
    <ul>
      {todos.map((todo) => (
        <Todo
          key={todo.id}
          todo={todo}
          onClick={() => dispatch("TOGGLE_ITEM", { todoId: todo.id })}
        />
      ))}
    </ul>
  );
};

export default TodoList;

Debugging

Supporting debugging by print all the store changes, example:

<center>

Logger Example

</center>