Skip to main content
Version: Next

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{}#

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]}
}
Edit this page