use-redux-state.md

id	title
use-redux-state	useReduxState()

This hook allows to create redux state at runtime.

useReduxState(statePath?: string, state?: any)

or

useReduxState(config?: {
  path?: string, // nested state path
  state?: any, // initial state
  reducer?: (storeState, initialState) => mergedState
})

returns{}

• selector
• setState
• getState
• action
• cleanup
• useMemoSelector
• useStateSelector

config

path''

type: string default: Date().getTime()
nestable key path of the redux state

useReduxState({ path: 'state.name', state: 'Mike' })
// creates nested state in the store {state: {name: 'Mike'}}

state?

type: any
initial state

useReduxState({ path: 'state.name', state: 'Mike' })
// creates nested state in the store {state: {name: 'Mike'}}

reducer()?

type: function
function that takes the current state for the given path, payload and returns computed new state. this function runs once during the initialization of the state use the function when you want to manually handle how the state should be created/updated.

useReduxState({ path: 'state.name', state: { is: 'Mike' } })
// {state: {name: {is: 'Mike'}}}

useReduxState({
  path: 'state.name',
  state: { and: 'Redux' },
  reducer: (currentState, payload) => ({ ...currentState, ...payload })
})

in the above example reducer had prevented from over-writing the store state when there is an existing value for the state. instead of:

{
  state: {
    name: {
      and: 'Redux'
    }
  }
}

we got:

{state: {name: {is: 'Mike', and: 'Redux'}}}

unmount?

type: boolean default: false

determines whether redux state should mount

useReduxState({ unmount: true, path: 'state.name', state: 'Mike' })
// store undefined
useReduxState({ unmount: false, path: 'state.name', state: 'Mike' })
// {state: {name: 'Mike'}}

cleanup?

type: boolean

determines whether redux state should cleanup the state when component unmounted from view.

const { getState } = useReduxState({
  cleanup: true,
  path: 'state.name',
  state: 'Mike'
})

useEffect(() => {
  console.log(getState()) // {state: {name: 'Mike'}}
  return () => console.log(getState()) // undefined
}, [])

Example

import React, { useEffect } from 'react'
import { View, StyleSheet, Button, Alert } from 'react-native'
import useReduxState from 'use-redux-states'

const App = () => {
  const {
    selector,
    useMemoSelector,
    getState,
    cleanup,
    setState
  } = useReduxState({
    /* nestable state path */
    path: 'state.name',
    /* initial component state */
    state: {
      count: 1,
      locale: 'en_US'
    },
    /* if state !exists overwrite with payload */
    reducer: (state, payload) => state || payload,
    /* whether state should be mounted */
    unmount: false
  })

  const { count, locale } = useMemoSelector(selector, (state) => state)

  useEffect(() => {
    /* delete the state when component unmount from tree */
    return () => cleanup()
  }, [])

  return (
    <Button onPress={() => setState({ count: count + 1 })}>
      <Text>
        {count}, {locale}
      </Text>
    </Button>
  )
}
export default App

Apis

getState

function to get states for a given state path in the redux store.

Arguments

selectorPath

selector function or path of the nest-able state to be selected

getState(selectorPath)

Returns

stateValue

getState('todos.completed') // any value

or

getState((state) => state.todos) // any value

Example

import { useEffect } from 'react'
import {useReduxState} from 'use-redux-states'
const Component = () => {
  const {getState} = useReduxState({
    state: {
      state1: [],
    },
    path: 'todos.completed'
  })

  useEffect(() => {
    console.log(getState('todos.completed'), getState((state) => state.todos))
    // {state1: []},{state1: []}
  }, [])
}

setState

function to update states in the redux store.

Arguments

payload|setter()?

(payload) value to set in the state or (setter) function to determine how the state should be set.

setState(payload: any | setter?: (state, payload) => newState)

Example

import { useReduxState } from 'use-redux-states'

const Component = () => {
  const { setState } = useReduxState({
    state: {
      state1: []
    },
    path: 'todos.completed'
  })

  console.log(
    setState((state) => {
      state.state1.push(payload)
      return state
    })
  )
  // {state1: [1]}
}