react-context-simply
    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

    Installation

    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

    constanst.js

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

    actions.js

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

    reducers.js

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

    store.js

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

    app.js

    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={()=>{
                increment()
              }}>
                <Text>Increment</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={()=>{
                decrement()
              }}>
                <Text>Decrement</Text>
              </TouchableOpacity>
              <Text>{state}</Text>
          </View>
        );
    }
     
    export default class App extends React.Component {
      render() {
        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:

        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

    actions.js

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

    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

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

    API Reference

    createStateContext

    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

    Example

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

    Example

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

    React Context Simply Starter

    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!

    Install

    npm i react-context-simply

    DownloadsWeekly Downloads

    0

    Version

    1.0.4

    License

    ISC

    Unpacked Size

    11.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • aminer