React-use-redux-state NPM

react-use-redux-state

Use a Redux store.

Install

npm install --save react-use-redux-state

Usage

The hook works in a way like useState, but for Redux.

import {createStore} from 'redux'
import {useReduxState} from 'react-use-redux-state'

const store = createStore(
    (state, action) => {
        const prevState = state || 0
        switch (action.type) {
            case 'inc':
                return prevState + action.value
            default:
                return prevState
        }
    },
)

const ReduxComponent = () => {
    const [state, dispatch] = useReduxState(store)
    return (
        <p
            onClick={() => dispatch({ type: 'inc', value: 1 })}
            onMouseMove={() => dispatch.inc({ value: 2 })}
        >
            {state}
        </p>
    )
}

<ReduxComponent />

Play in browser

ReduxComponent would render 0 in the beginning. Its value would increase 1 after each click, increase 2 after each mouse move.

To make an in-component Redux store, use this hook along with useRef or useMemo.

Notice you may pass action type as method name in environments with Proxy support. TypeScript support is also included.

Limits

Due to the flexibility of hooks, some logic like extracting component state from Redux state is designed to be left to you.

You may want to write code like:

const Component = props => {
    const store = useContext(StoreContext)
    const [appState, dispatch] = useReduxStore(store)
    const state = useMemo(()=> {/* compute & return component state from redux state */, [appState, props])}

    return /* use the variable `state` here */
}

Where StoreContext is your context, created by something like React.createContext(store). Or you can just import a global store instance like the example above.