diff --git a/example/src/App.js b/example/src/App.js index 958f7b9..e7cc89a 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -135,15 +135,24 @@ const Arr = () => { return (
-
arrays: {array.map((a) => a + ', ')}
+
arrays: {array?.map((a) => a + ', ')}
) } 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] +} +```