Context provides a way to pass data through the component tree without having to pass props down manually at every level.
But you can use context-api
as a global state management tool, there are lots of complex libraries (Redux
, mobx
, Recoil
, HookState
and many more...) for managing state in React.js
application, but i created this with instant solution zero boiler plate code.
Because i liked React.js
and building some web app for my personal use during my journey i have lots of problems. but i never give up. And this attitude reached me here now i am learning typescript
but my methods for learing coding is practice and for deep dive in typescript
i converted my previous web app to typescript
so now i can able to doing basic things from this.
And for knowing more things in technology era i loved to learn something everyday.
562B with all dependencies, minified and gzipped
To intigrate mini-state
in your projects you need to install using npm
after install follow these examples.
npm install mini-state
Make Reducer and initialState for your application
const reducer = (state, action) => {
switch (action.type) {
case "increment":
return state.count + 1;
case "decrement":
return state.count + 1;
default:
return state;
}
};
For creating context you need to create a reducer
function just like above and use in the first parameter createReducerCTX
and second parameter for initialState
that function looks like useReducer
hook.
Create this function in the top level
reducer
- simple pure javascript function
initialState
- initialState for application
const [Context, Provider] = createReducerCTX(reducer, { count: 1 });
Connect provider to your application and use like below.
const Root = () => {
return (
<Provider>
<App />
</Provider>
);
};
export default Root;
We successfully added this to your application
const App = () => {
const { state, dispatch } = useCTX(Context);
return (
<div>
<h1> Count is {state.count}</h1>
<button onClick={() => dispatch({ type: "increment" })}>Increment</button>
<button onClick={() => dispatch({ type: "decrement" })}>Decrement</button>
</div>
);
};