react-reducer-store
Advanced tools
Comparing version 2.1.5 to 2.1.6
@@ -167,3 +167,2 @@ 'use strict'; | ||
if (!shallowEqual(newState, oldState)) { | ||
console.log('calling setState', newState, oldState); | ||
setState(newState); | ||
@@ -170,0 +169,0 @@ } |
@@ -160,3 +160,2 @@ import React, { createContext, useReducer, useEffect, useState, useContext } from 'react'; | ||
if (!shallowEqual(newState, oldState)) { | ||
console.log('calling setState', newState, oldState); | ||
setState(newState); | ||
@@ -163,0 +162,0 @@ } |
{ | ||
"name": "react-reducer-store", | ||
"version": "2.1.5", | ||
"version": "2.1.6", | ||
"main": "dist/index.cjs.js", | ||
@@ -5,0 +5,0 @@ "module": "dist/index.esm.js", |
@@ -47,3 +47,3 @@ # react-reducer-store | ||
export default function Form(props) { | ||
const dispatch = useDispatch | ||
const dispatch = useDispatch() | ||
@@ -56,3 +56,3 @@ function handleRandom() { | ||
### Use useStore hook | ||
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. | ||
Use the store from the List component using useStore hook | ||
``` | ||
@@ -62,3 +62,3 @@ import { useStore, useDispatch } from 'react-reducer-store'; | ||
export default function List() { | ||
const state = useStore(); | ||
const todo = useStore(state => state.todo, []); | ||
const dispatch = useDispatch(); | ||
@@ -75,3 +75,3 @@ | ||
<div className="list"> | ||
{state.todo.map(item => ( | ||
{todo.map(item => ( | ||
<ListItem key={item.id} | ||
@@ -87,17 +87,3 @@ onDelete={handleDelete.bind(null, item.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 | ||
@@ -104,0 +90,0 @@ To add logging to the console, set the log prop on the Store to true. |
46834
307
95