react-reducer-store - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

dist/index.cjs.js

@@ -72,9 +72,4 @@ 'use strict';
   }, [state]);
-
-  if (props.log) {
-    dispatch = logAndDispatch;
-  }
-
   return React__default.createElement(DispatchContext.Provider, {
-    value: dispatch
+    value: props.log ? logAndDispatch : dispatch
   }, React__default.createElement(StoreContext.Provider, {
@@ -81,0 +76,0 @@ value: state

dist/index.esm.js

@@ -65,9 +65,4 @@ import React, { createContext, useReducer, useEffect, useContext, useMemo } from 'react';
   }, [state]);
-
-  if (props.log) {
-    dispatch = logAndDispatch;
-  }
-
   return React.createElement(DispatchContext.Provider, {
-    value: dispatch
+    value: props.log ? logAndDispatch : dispatch
   }, React.createElement(StoreContext.Provider, {
@@ -74,0 +69,0 @@ value: state

package.json

 {
   "name": "react-reducer-store",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "main": "dist/index.cjs.js",
@@ -5,0 +5,0 @@ "module": "dist/index.esm.js",

README.md

@@ -17,5 +17,7 @@ # react-reducer-store
 import todoReducer from './todoReducer';
+import randomReducer from './randomReducer';
 
 export default combineReducers({
-    todo: todoReducer
+    todo: todoReducer,
+    random: randomReducer
 });
@@ -40,9 +42,23 @@ ```
 
+### Use useDispatch hook
+Use the useDispatch hook to get the dispatch function to root reducer.
+```
+import { useDispatch } from 'react-reducer-store';
+
+export default function Form(props) {
+    const dispatch = useDispatch
+
+    function handleRandom() {
+        dispatch({ type: 'DO_RANDOM' });
+    }
+```
+
 ### Use useStore hook
-Use the store from the List component.
+Use the store from the List component. Using the useStore hook will cause too many renders. So, recommend to use the connect higher order component shown below.
 ```
-import { useStore } from 'react-reducer-store';
+import { useStore, useDispatch } from 'react-reducer-store';
 
 export default function List() {
-    const [state, dispatch] = useStore();
+    const state = useStore();
+    const dispatch = useDispatch();
 
@@ -69,2 +85,17 @@ function handleDelete(id) {
 
+### Use connect HOC
+connect function takes in mapStateToProps and component and returns a new component. The new component computes the requisite state from the global context. The state is attached to the props of the component. If there is no change in the props, then the wrapped component does not render.
+```
+import { connect } from 'react-reducer-store';
+
+function mapStateToProps(state) {
+    return {
+        todo: state.todo
+    };
+}
+
+export default connect(mapStateToProps, List);
+
+```
+
 ### Logging
@@ -71,0 +102,0 @@ To add logging to the console, set the log prop on the Store to true.

No alert changes

Improved metrics

Total package byte prevSize

43989

increased by2.28%

Number of lines in readme file

109

increased by39.74%

Worsened metrics

Lines of code

178

decreased by-3.26%

No dependency changes