@stenners/understated
v1.0.0
Published
Super simple, hooks-based state management for React
Downloads
1
Maintainers
Readme
Understated
Super simple, hooks-based state management for React
You don't really need this library; it just's wrapper around React's Context API and useReducer. See the bottom for an example of handling it yourself.
Usage
StateProvider
Wrap your main component with the included StateProvider
import { StateProvider } from '@stenners/understated';
// import { testReducer } from './reducers'; // See reducer example below
const App = () => {
const initialState = {
};
return (
<StateProvider initialState={initialState} reducer={reducer}>
...
</StateProvider>
);
};
export default App;
Reducers
Define a reducer (or seven) and import into the main app:
export const testReducer = (state, action) => {
switch (action.type) {
case "someAction":
return {
...state,
thing: action.data
};
default:
return state;
}
};
Actions
Import getState
, Define some actions and import where they need to be called.
import { getState } from "@stenners/understated";
// use state if you need state where your action is called.
// dispatch is used to fire the action.
const [state, dispatch] = getState();
const onEvent = () => {
dispatch({
type: "someAction", // action
data: {
...
}
})
}
Roll your own:
Instead of importing '@stenners/understated' and using the provider, do your own:
import React, { createContext, useContext, useReducer } from 'react';
import { testReducer } from './reducers';
const App = () => {
const initialState = {};
const StateContext = createContext(initialState);
const [state, dispatch] = useReducer(testReducer, initialState);
return (
<StateContext.Provider value={{ state, dispatch }}>
// Main component here
</StateContext.Provider>
);
};