more intelligent setter

Author: myckhel

example/src/App.js

@@ -135,15 +135,24 @@ const Arr = () => {
 
   return (
     <div>
-      <h6>arrays: {array.map((a) => a + ', ')}</h6>
+      <h6>arrays: {array?.map((a) => a + ', ')}</h6>
       <Button
-        onPress={() => setState((array) => [...array, (array.pop() || 0) + 1])}
+        onPress={() =>
+          setState((array) =>
+            array ? [...array, (array.pop() || 0) + 1] : [1, 2, 3]
+          )
+        }
         title='Increase Array'
       />
       <Button
-        onPress={() => setState((array) => array.slice(0, array.length - 1))}
+        onPress={() =>
+          setState((array) =>
+            array ? array.slice(0, array.length - 1) : [1, 2, 3]
+          )
+        }
         title='Decrease Array'
       />
+      <Button onPress={() => setState()} title='Reset Array' />
     </div>
   )
 }

example/src/redux/store.js

@@ -17,13 +17,17 @@ const store = configureStore({
 })
 setConfig({
   cleanup: true,
-  setter: (state, payload) => {
-    console.log('using custom setter for type '+(typeof state));
-    switch (typeof state) {
-      case 'object':
-        return { ...state, ...payload }
-      case 'array':
-        return [...state, ...payload]
+  setter: (existingState, payload) => {
+    console.log('using custom setter for type ' + typeof state)
+    switch (existingState?.constructor) {
+      case Object:
+        return payload?.constructor === Object
+          ? { ...existingState, ...payload }
+          : payload
+      case Array:
+        return payload?.constructor === Array
+          ? [...existingState, ...payload]
+          : payload
       default:
         return payload
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-redux-state-hook",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-beta.1",
   "description": "Create runtime redux state",
   "keywords": [
     "redux-state",

src/reducers.js

@@ -102,12 +102,16 @@ export const setWith = (object, path, value, index = 0) => {
   return setWith(object[paths[index]], paths, value, ++index)
 }
 
-const _setter = (stateValue, payload) => {
-  switch (stateValue?.constructor) {
+const _setter = (existingState, payload) => {
+  switch (existingState?.constructor) {
     case Object:
-      return { ...stateValue, ...payload }
+      return payload?.constructor === Object
+        ? { ...existingState, ...payload }
+        : payload
     case Array:
-      return [...stateValue, ...payload]
+      return payload?.constructor === Array
+        ? [...existingState, ...payload]
+        : payload
     default:
       return payload
   }

website/docs/guides/using-redux-state.md

@@ -1,4 +1,52 @@
 ---
 id: using-redux-state
-title: state
+title: using redux state
 ---
+
+```js
+import React from 'react'
+import useReduxState from 'use-redux-state-hook'
+
+const App = () => {
+  useReduxState({
+    name: 'todos',
+    state: [1,2,3],
+  })
+  // creates state in the store with key = todos and value = [1,2,3]
+}
+```
+## controlling how initial state should be set
+When you use the `redux-state-hook` with a default state, under the hood it sets the initial state in the store with the given name.<br/>
+`redux-state-hook` has an intelligent setter function which determines how your state will be set based on the payload **(referring the initial state as the payload)**.
+When array is passed as the payload setter assumes you will append the payload with the current state array.<br />
+Given the example below the initial todos state has `[1,2]` value, setter will push to the existing array state if the payload is array otherwise will replace the state.
+```js
+import React from 'react'
+import useReduxState from 'use-redux-state-hook'
+
+const App = () => {
+  // existing todos state = [1,2]
+  useReduxState({
+    name: 'todos',
+    state: [3],
+  })
+  // later todos state = [1,2,3]
+}
+```
+Same logic applies to json object but [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) payload value replaces the existing state.<br/>
+You can handle the setter behaviour by passing a reducer function.
+```js
+import React from 'react'
+import useReduxState from 'use-redux-state-hook'
+
+const App = () => {
+  // existing todos state = [1,2]
+  useReduxState({
+    name: 'todos',
+    state: [3],
+    reducer: (existingState, payload) => existingState ? [...payload, ...existingState] : payload
+    // custom setter function prepends to the existing state
+  })
+  // later todos state = [3,1,2]
+}
+```