/ State

A lightweight state management inspired by Flux and Redux

A lightweight state management inspired by Flux and Redux

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 but only one root Store:

react-recontext

Installation

npm install --save react-recontext

or

yarn add react-recontext

API

  1. createStore: of course, to create the Store! 😗
  2. Provider: wrap the root component
  3. connect: connect any component (View) to Store.
  4. dispatch: dispatch an event to update the Store

Note: All action event types are generated automatically. For example, when you create an action:

    const actionsCreators = {
        addTodoItem: (state, { item }) => ({
            list: state.list.push(item)
        })
    };

The action event type was also created, so you only need to change the action name from camel case into screaming snake case like this:

    dispatch("ADD_TODO_ITEM", { item: item })

Usage

There is a detailted example you can play with: Todo App Example

  1. Create store.js

    import createStore from "react-recontext";
    
    const initialState = {
        todos: [
            {
                id: 1,
                content: "Drink water",
                completed: true
            },
        ]
    };
    
    const actionsCreators = {
        toggleItem: (state, { todoId }) => ({
            todos: state.todos.map(
                todo =>
                    todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
                )
        })
    };
    
    export const { Provider, connect, dispatch } = createStore(
        initialState,
        actionsCreators,
        true //enable debugging
    );
    
  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(...)
    
    const App = () => (
        <Provider>
            <AppNavigator />
        </Provider>
    );
    
  2. Connect component to get data and call action anywhere you want

    import React from "react";
    import Todo from "./Todo";
    import { connect, dispatch } from "./store";
    
    const TodoList = ({ todos }) => (
        <ul>
            {todos.map(todo => (
                <Todo
                    key={todo.id}
                    todo={todo}
                    onClick={() => dispatch("TOGGLE_ITEM", ({ todoId: todo.id }))}
                />
            ))}
        </ul>
    );
    
    const mapStateToProps = state => ({
        todos: state.todos
    });
    
    export default connect(mapStateToProps)(TodoList);
    

React-recontext logger example:

logger

GitHub