Awesome
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
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 />
Componentdispatch(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
- actionType: a string corresponding to the action name in
Example
There are some examples you can play with:
- Todo Example React Web:
- Todo Example React Native: Todo App Example
- React Native Audiobook: Audiobook React Native App
- ...more is coming...
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:
<center>