Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-recontext

4.0.5 • Public • Published

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

Install

npm i react-recontext

DownloadsWeekly Downloads

25

Version

4.0.5

License

ISC

Unpacked Size

31.4 kB

Total Files

9

Last publish

Collaborators

  • avatar