Socket
Book a DemoInstallSign in
Socket

react-recontext

Package Overview
Dependencies
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install
Package was removed
Sorry, it seems this package was removed from the registry

react-recontext

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

0.0.3
latest
Source
npmnpm
Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

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

  • 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
      ),
    }),
  },
});
  • 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>
);
  • 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

Keywords

react

FAQs

Package last updated on 02 Jan 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.