Skip to content
This repository has been archived by the owner on Jun 17, 2023. It is now read-only.
/ react-recontext Public archive

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

License

Notifications You must be signed in to change notification settings

homielab/react-recontext

Repository files navigation

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
);
  • initialState: vanilla or immutable js object, contains store default value.
  • actionsCreators: js object contains function to update store value
  • enableLogger: boolean flag to enable logging for debug
  • <Provider />: wrap the root Component. The root component usually is <App /> Component
  • 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 changes you want to update in store

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
  • react:
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")
);
  • 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 = () => (
    <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:

Logger Example

About

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

Resources

License

Code of conduct

Stars

Watchers

Forks