React Context Simply
A small package that will helps you manage your app state using react context api using hooks
Installation
npm install react-context-simply --save
Minimal Example
Before start please note :
- state is an immutable object, can not be changed directly only by dispatching action
constanst.js
// file holds all our constants will be used in dispatching actions also in reducerconst INCREMENT = 'INCREMENT';const DECREMENT = 'DECREMENT';
actions.js
;const increment = type: INCREMENT ;const decrement = type: DECREMENT ;
reducers.js
; { }
store.js
;; const useStateValue StateProvider StateContext } = ; const useCountState = useStateValue;const CountState = StateProvider;const CountStateContext = StateContext ;
app.js
;; { const state actions = const increment decrement = actions return <View style=flex: 1 flexDirection: 'column' alignItems: 'center' justifyContent: 'center'> <TouchableOpacity onPress={ }> <Text>Increment</Text> </TouchableOpacity> <TouchableOpacity onPress={ }> <Text>Decrement</Text> </TouchableOpacity> <Text>state</Text> </View> ;} Component { return <CountState> <Counter /> </CountState> ; }
for me i prefer to seperate the code into files but you can do it in one file, its all up to you
Limitation :
the consumer component it should be a functional component but its possible to acces state in class based component like this:
; ; static contextType = CountStateContext; { const state actions = thiscontext; }
Dispatching Async Action
Of course in real world app you will need to make async calls wether requesting an api or writing to storage whatever the reason why it will be one for sure, With React Context Simply it has a redux-thunk like already built-in
actions.js
const callApi = { try // dispatching a loading action const res = await const todos = await res // dispatching a sucess action catch error // dispatching an error action }
Middlewares
middlwares are known for extending with custom functionalities, basically its a function thats got passed a state and dispatch in arguments, in react context simply instead you return the next function will be called, it return the state along with the new dispatched action, also in sometime you want that middleware to be hooked only with one action or multiple actions or all actions, next section we will cover how you can do that by passing array of middlwares each contain the action will be associated with
const logger = { const newDis = { console return } return state newDis}
API Reference
createStateContext
createStateContext
returns the provider as well as the hook that will be called inside the consumer to get the state and actions
- The
initialState
The initial State to begin withone. - The
reducer
A pure function that takes the previous state and an action, and returns the next state. based on the action passed to it - The
actions
sets of actions that holds information that send data to your store - The
middlewares
are optioanl argument, is an array that hold objects, each contain the middlware and the action associated with it, for the action you can either pass the action constant or an array of actions, or an*
which mean the middleware will be for all the actions
Example
const useStateValue StateProvider StateContext } = ;
Example
A repo showing the usage of the package doing a Todo example and timer example
Articles
Rolling Your Own Redux with react hooks and context
Writing Redux-like simple middleware for React Hooks
State Management with React Hooks and Context API in 10 lines of code!