
Product
Announcing Socket Fix 2.0
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
react-recontext
Advanced tools
A lightweight state management inspired by Flux, Redux, based on the lastest React Context API
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
npm install --save react-recontext
or
yarn add react-recontext
“Everything should be made as simple as possible, but no simpler.” - Einstein
const { Provider, Context, dispatch } = createStore(
initialState,
actionsCreators,
enableLogger
);
<Provider />
: wrap the root Component. The root component usually is <App />
Componentdispatch(actionType, params)
: dispatch an event to update the Store value, from everywhere.
actionsCreators
There are some examples you can play with:
Only 3 steps to start with react-recontext
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
),
}),
},
});
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")
);
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>
);
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;
Supporting debugging by print all the store changes, example:
FAQs
A lightweight state management inspired by Flux, Redux, based on the lastest React Context API
The npm package react-recontext receives a total of 0 weekly downloads. As such, react-recontext popularity was classified as not popular.
We found that react-recontext demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Product
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
Security News
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.