# react-recontext-os

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

Latest version **1.0.0** (published 2022-01-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-recontext-os
pnpm add react-recontext-os
yarn add react-recontext-os
bun add react-recontext-os
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-01-16 |
| First published | 2022-01-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mpvasilis |
| Maintainers | mpvasilis |
| Keywords | react, reactjs, react-native, redux, context, react-context, state, lightweight, flux, state |

## Links

- npm: https://www.npmjs.com/package/react-recontext-os
- npm.io page: https://npm.io/package/react-recontext-os

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-01-16
- 0.0.3 — 2022-01-16

## README

## react-recontext

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-os

_or_

    yarn add react-recontext-os

## Api

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

```js
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

## Usage

Only **3 steps** to start with react-recontext

1.  Create **store.js**

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

2.  Wrap root component with Provider

- react:

```js
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

```js
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>
);
```

3. Get data from store inside component by using React.useContext, and dispatch an action from anywhere you want

```js
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;
```

---
_Source: https://npm.io/package/react-recontext-os · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._