react-context-simply - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

index.js

 import React, { createContext, useContext, useReducer, useCallback } from 'react';
 
 const augmentDispatch = (state, dispatch) => (input) => typeof input === 'function' ? input(state, dispatch) : dispatch(input);
+
+/**
+   * creates the provider as well as the hook that returns store and actions
+   *
+   * @param {T} initialState The initial State to begin with
+   * @param {Reducer<T>} reducer it describes how an action transforms the state into the next state
+   * @param {IActions} actions sets of actions that holds information that send data to your store
+   * @param {IMiddleware | IMiddleware[]} middleware array of objects, each contain the middleware function and action that will be hooked to it
+   * @returns {IStateContext<T>} it return basically our provider also a hook function that will return our store and actions
+   * @public
+   */
 export default function createStateContext(initialState, reducer, actions, middleware) {
@@ -27,3 +38,3 @@ const middlewares = Array.isArray(middleware) ? middleware : (middleware && [middleware])
         const newActions = Object.keys(actions).reduce((result, action) => {
-          result[action] = useCallback((payload) =>  enhancedDispatch(actions[action](payload)), [])
+          result[action] = useCallback((...payload) =>  enhancedDispatch(actions[action](...payload)), [])
           return result;
@@ -30,0 +41,0 @@ }, {});

package.json

 {
   "name": "react-context-simply",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "leveraging the react context api for state management with no boilerplate code",
@@ -10,6 +10,2 @@ "main": "index.js",
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/aminerol/react-context-simply.git"
-  },
   "keywords": [
@@ -16,0 +12,0 @@ "react context",

README.md

 # React Context Simply
-A small package that will helps you manage your app state using react context api and hooks
+A small package that will helps you manage your app state using react context api using hooks
 
@@ -18,3 +18,3 @@
 `constanst.js`
-```
+```js
 // file holds all our constants will be used in dispatching actions also in reducer
@@ -27,3 +27,3 @@ export const INCREMENT = 'INCREMENT';
 `actions.js`
-```
+```js
 import { INCREMENT, DECREMENT } from "./constants";
@@ -36,3 +36,3 @@ export const increment = () => ({ type: INCREMENT });
 `reducers.js`
-```
+```js
 import { INCREMENT, DECREMENT } from "./constants";
@@ -53,3 +53,3 @@ export default function countReducer(state, action) {
 `store.js`
-```
+```js
 import createStateContext from 'react-context-simply';
@@ -78,3 +78,3 @@ import countReducer from './reducers';
 `app.js`
-```
+```js
 import React from 'react';
@@ -121,3 +121,3 @@ import { CountState, useCountState } from './store.js';
 
-    ```
+```js
     import React, { Component } from 'react';
@@ -132,4 +132,85 @@ import { CountStateContext } from './store';
     }
+```
 
-    ```
+# 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`
+```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
+
+```js
+export const logger = ([state, dispatch]) => {
+  const newDis = action => {
+    console.log('Dispatching Action => ', action)
+    return dispatch(action)
+  }
+  return [state, newDis]
+}
+
+````
+
+# API Reference
+
+## createStateContext
+
+```js
+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
+
+```js
+
+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](https://github.com/aminerol/React-Native-Context-Api-Starter)
+
+# Articles
+
+[Rolling Your Own Redux with react hooks and context](https://medium.com/yld-blog/rolling-your-own-redux-with-react-hooks-and-context-bbeea18b1253)
+
+[Writing Redux-like simple middleware for React Hooks](https://medium.com/front-end-weekly/writing-redux-like-simple-middleware-for-react-hooks-b163724a7058)
+
+[State Management with React Hooks and Context API in 10 lines of code!](https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c)

New alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11294

increased by52.4%

Lines of code

79

increased by14.49%

Number of lines in readme file

210

increased by62.79%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes