)
}
diff --git a/example/src/redux/store.js b/example/src/redux/store.js
index 0622c3a..38b2983 100644
--- a/example/src/redux/store.js
+++ b/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
}
diff --git a/package.json b/package.json
index bec9a3d..b12549c 100644
--- a/package.json
+++ b/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",
diff --git a/src/reducers.js b/src/reducers.js
index fe03a3e..2ff60c0 100644
--- a/src/reducers.js
+++ b/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
}
diff --git a/website/docs/guides/using-redux-state.md b/website/docs/guides/using-redux-state.md
index c966f96..4f0bb20 100644
--- a/website/docs/guides/using-redux-state.md
+++ b/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.
+`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.
+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.
+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]
+}
+```