TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    React Context Simply

    A small package that will helps you manage your app state using react context api using hooks


    npm install react-context-simply --save

    Minimal Example

    Before start please note :

    1. state is an immutable object, can not be changed directly only by dispatching action


    // file holds all our constants will be used in dispatching actions also in reducer
    export const INCREMENT = 'INCREMENT';
    export const DECREMENT = 'DECREMENT';


    import { INCREMENT, DECREMENT } from "./constants";
    export const increment = () => ({ type: INCREMENT });
    export const decrement = () => ({ type: DECREMENT });


    import { INCREMENT, DECREMENT } from "./constants";
    export default function countReducer(state, action) {
        switch (action.type){
          case INCREMENT:
            return state + 1;
          case DECREMENT:
            return state - 1;
            return state;


    import createStateContext from 'react-context-simply';
    import countReducer from './reducers';
    import * as actions from './actions'
    const {
    = createStateContext({}, countReducer, actions);
    const useCountState = useStateValue;
    const CountState = StateProvider;
    const CountStateContext = StateContext
    export {


    import React from 'react';
    import { CountState, useCountState } from './store.js';
    function Counter() {
        const [state, actions] = useCountState()
        const {increment, decrement} = actions
        return (
          <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
              <TouchableOpacity onPress={()=>{
              <TouchableOpacity onPress={()=>{
    export default class App extends React.Component {
      render() {
        return (
              <Counter />

    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:

        import React, { Component } from 'react';
        import { CountStateContext } from './store';
        class Counter extends Component {
            static contextType = CountStateContext;  
            render() {
                const [state, actions] = this.context;

    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


    export const callApi = () => (state, dispatch) => {
        dispatch({ type: CALL_API })
        try {
            // dispatching a loading action
            const res = await fetch('')
            const todos = await res.json()
            // dispatching a sucess action
          } catch (error) {
            // dispatching an error action


    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

    export const logger = ([state, dispatch]) => {
      const newDis = action => {
        console.log('Dispatching Action => ', action)
        return dispatch(action)
      return [state, newDis]

    API Reference


    createStateContext(initialState, reducer, actions, [middlewares])

    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


    const {
    = createStateContext([], todoReducer, actions, [
        {action: '*', middleware: logger},
        {action: [ADD_TODO], middleware: addTodo},
        {action: GET_TODOS, middleware: getTodos},


    A repo showing the usage of the package doing a Todo example and timer example

    React Context Simply Starter


    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!


    npm i react-context-simply

    DownloadsWeekly Downloads






    Unpacked Size

    11.3 kB

    Total Files


    Last publish


    • aminer