alpha docs

README.md

@@ -62,7 +62,7 @@ const Usage = () => {
 [Code Sandbox Example](https://codesandbox.io/s/usereduxstate-gdl7g)
 
 ### React Native Snack Example
-[Snack Example](https://snack.expo.io/embed.js)
+[Snack Example](https://snack.expo.io/@myckhel/use-redux-state-hook)
 
 ## API
 

package.json

@@ -14,6 +14,7 @@
   "author": "myckhel",
   "license": "MIT",
   "repository": "myckhel/use-redux-state-hook",
+  "homepage": "https://myckhel.github.io/use-redux-state-hook",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.js",

src/hooks.js

@@ -88,7 +88,7 @@ export const useReduxState = (config, initState) => {
 
   const _selector = useCallback(
     (state) => {
-      const storeState = selector(state, name, getInit)
+      const storeState = selector(state, name)
       return storeState !== undefined ? storeState : getInit()
     },
     [name]
@@ -180,5 +180,4 @@ export const action = (name, payload, reducer) => ({
   reducer
 })
 
-export const selector = (state, name, getInit = () => undefined) =>
-  get(state?.[STATE_NAME], name)
+export const selector = (state, name) => get(state?.[STATE_NAME], name)

website/docs/apis/action.md

@@ -1,36 +1,45 @@
 ---
 id: action
-title: action
+title: action()
 ---
 
-This creates redux action for a given state.
+Action creator for dispatching setState action for a given state name.
+
+```ts
+action(stateName, payload, setter?: (state, payload) => newState)
 ```
+
+## `Returns`
+
+setState redux action
+
+```ts
 action(stateName, payload, setter)
+// { type: SET_REDUX_STATE, payload, name, reducer }
 ```
 
-## Returns
-Redux action
-
-## Example
+## `Example`
 
 ```jsx
-import {useEffect} from 'react'
-import useReduxState, {action} from 'use-redux-state-hook'
+import { useEffect } from 'react'
+import useReduxState, { action } from 'use-redux-state-hook'
 const Component = () => {
   useReduxState({
     state: {
       state1: 'a',
-      state2: 'b',
+      state2: 'b'
     },
     name: 'component_state'
   })
 
   useEffect(() => {
-    store.dispatch(action(
-      'component_state',
-      {state2: 'c'},
-      (component_state, payload) => ({...component_state, ...payload})
-    ))
+    store.dispatch(
+      action(
+        'component_state',
+        { state2: 'c' },
+        (component_state, payload) => ({ ...component_state, ...payload })
+      )
+    )
     // component_state {state1: 'a', state2: 'c'}
   }, [])
 }

website/docs/apis/cleanup.md

@@ -1,4 +1,35 @@
 ---
 id: cleanup
-title: cleanup
+title: cleanup()
 ---
+
+function that dispatches an action to delete the state from redux store.
+useful when you dont want to persist the state when component unmounted.
+
+*function is provided by `use-redux-state-hook`*
+
+```js
+cleanup()
+```
+
+## `Example`
+
+```jsx
+import { useEffect } from 'react'
+import useReduxState from 'use-redux-state-hook'
+const Component = () => {
+
+  const {cleanup} = useReduxState({
+    state: {
+      state1: 'a',
+      state2: 'b'
+    },
+    name: 'component_state'
+  })
+
+  useEffect(() => {
+    return () => cleanup()
+    /* component_state: undefined */
+  }, [])
+}
+```

website/docs/apis/get-state.md

@@ -1,4 +1,44 @@
 ---
 id: get-state
-title: getState
+title: getState()
 ---
+
+function to get the state for a given state name.
+
+## `Arguments`
+
+### **stateName**
+
+name of the nest-able state to be selected
+
+```js
+getState(store, stateName, getter?: (state) => selectedState)
+```
+
+## `Returns`
+
+### **stateValue**
+
+```js
+getState(store, 'todos.completed', (state) => state.todos) // any value
+```
+
+## `Example`
+
+```jsx
+import { useEffect } from 'react'
+import useReduxState, { getState } from 'use-redux-state-hook'
+const Component = () => {
+  useReduxState({
+    state: {
+      state1: [],
+    },
+    name: 'todos.completed'
+  })
+
+  useEffect(() => {
+    console.log(getState(store, 'todos.completed', (state) => state.todos))
+    // {state1: []}
+  }, [])
+}
+```

website/docs/apis/hooks/use-get-state.md

@@ -0,0 +1,42 @@
+---
+id: use-get-state
+title: useGetState()
+---
+
+This hook gives you a getState function for a given state
+
+## Arguments
+
+### `stateName`
+
+name of the nestable state to be selected
+
+## Returns
+
+### `getState()`
+
+```js
+getState(stateName)
+```
+
+## Example
+
+```jsx
+import { useEffect } from 'react'
+import useReduxState, { useGetState } from 'use-redux-state-hook'
+const Component = () => {
+  useReduxState({
+    state: {
+      state1: 'a',
+      state2: 'b'
+    },
+    name: 'component_state'
+  })
+  const getState = useGetState('component_state')
+
+  useEffect(() => {
+    console.log(getState((component_state) => component_state?.state2))
+    // 'c'
+  }, [])
+}
+```

website/docs/apis/hooks/use-memo-selector.md

@@ -1,45 +1,59 @@
 ---
 id: use-memo-selector
-title: useMemoSelector
+title: useMemoSelector()
 ---
 
 This hook allows to select redux state efficiently and in a memoized way.
 it uses [createSelector](https://github.com/reduxjs/reselect#createselectorinputselectors--inputselectors-resultfunc) to make sure selector is not recomputed unless one of its arguments changes.
-it also uses [react-fast-compare](https://gg.com) to prevent unnecessary updates.
+it also uses [react-fast-compare](https://github.com/FormidableLabs/react-fast-compare) to prevent unnecessary updates.
 
 ## Arguments
-### selector()||stateName''
-#### selector()
+
+### `selector()||stateName''`
+
+#### `selector()`
+
 function that selects from the state.
 receives 1 argument
+
 ```
 (storeState) => selectedState
 ```
-#### stateName
+
+#### `stateName`
+
 name of the nestable state to be selected
 
-### result()
+### `result()`
+
 function that returns the result of the selected state
+
 ```
 (selectedState) => selectedState
 ```
-### equality()
-function that compare prevState against newState to determine if selected state has changed. defaults to [react-fast-compare](https://gg.com)
+
+### `equality()`
+
+function that compare prevState against newState to determine if selected state has changed. defaults to [react-fast-compare](https://github.com/FormidableLabs/react-fast-compare)
 
 ## Example
+
 ```jsx
-import useReduxState, {useMemoSelector} from 'use-redux-state-hook'
+import useReduxState, { useMemoSelector } from 'use-redux-state-hook'
 const Component = () => {
-  const {selector} = useReduxState({
+  const { selector } = useReduxState({
     state: {
       state1: 'a',
-      state2: 'b',
+      state2: 'b'
     },
     name: 'component_state'
   })
-  const state1 = useMemoSelector(selector, (component_state) => component_state?.state1)
+  const state1 = useMemoSelector(
+    selector,
+    (component_state) => component_state?.state1
+  )
   const state2 = useMemoSelector('component_state.state2')
 
-  console.log({state1, state2}) // {state1: 'a', state2: 'b'}
+  console.log({ state1, state2 }) // {state1: 'a', state2: 'b'}
 }
 ```