react-context-simply - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

index.js

@@ -11,8 +11,10 @@ import React, { createContext, useContext, useReducer, useCallback } from 'react';
           const newDis = action => {
-            const types = Array.isArray(mw.action) ? mw.action : [mw.action]
-            if(types.includes(action.type) || types.includes('*')){
-              let [_, next] = mw.middleware([state, agg])
-              return next(action)
-            }else{
-              return agg(action)
+            if(action){
+              const types = Array.isArray(mw.action) ? mw.action : [mw.action]
+              if(types.includes(action.type) || types.includes('*')){
+                let [_, next] = mw.middleware([state, agg])
+                return next(action)
+              }else{
+                return agg(action)
+              }
             }
@@ -19,0 +21,0 @@ }

package.json

 {
   "name": "react-context-simply",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "leveraging the react context api for state management with no boilerplate code",
   "main": "index.js",
+  "types": "index.d.ts",
   "scripts": {
@@ -7,0 +8,0 @@ "test": "echo \"Error: no test specified\" && exit 1"

README.md

@@ -1,1 +0,128 @@
-TODO : a Readme
+# React Context Simply
+A small package that will helps you manage your app state using react context api and 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;
+        }
+    }
+
+    ```
+

No alert changes

Improved metrics

Total package byte prevSize

7411

increased by167.55%

Number of package files

5

increased by25%

Lines of code

69

increased by130%

Number of lines in readme file

129

increased by6350%

No dependency changes