redux-state-hook v1.2.0
redux-state-hook
A lightweight React hook to consume Redux state
Installation
Add it as a dependency to your package.json
with
npm i --save redux-state-hook
or
yarn add redux-state-hook
Introduction
redux-state-hook
requires React (v16.8.0+) and Redux (v3.0.0+). It is a non-invasive library, and aims to replace the use of React-Redux by providing a React hook instead of connected components - but it can be used alongside React-Redux without any problem.
To minimize component re-rendering, it's adviced to use a helper package when selecting state values, such as reselect.
API
<Provider store={reduxStore}>
The Provider
-component manages the Redux store in it's own context. This component needs to be available in the component tree, to let useReduxState
reach the actual Redux store.
useReduxState(selectorFn = null)
The hook itself takes an optional selectorFn
which is a utility function to select a part of the Redux state tree. When selecting simple values such as numbers, strings, plain arrays or non-nested objects, useReduxState
utilizes a shallow compare to reduce the number of component renders. For more complex data structures, a reselect
selector can be used effectivly.
useReduxState
returns a value pair, where the first value is the selected partial state, and the second value is the dispatch
function from Redux. This function should be used to dispatch actions.
The selectorFn
is an optional parameter, and when it's omitted the hook always returns a null
value for the partial state return. This is useful when a component only need access to the dispatch
function without caring about any state or state changes.
Example
There's a runnable, full scale, example available in the example directory.
Usage
app.js
import React from "react";
import { render } from "react-dom";
import { createStore, combineReducers } from "redux";
import { Provider } from "redux-state-hook";
const counter = (state = { count: 0 }, action) => {
switch (action.type) {
case "INCREASE": return { ...state, count: state.count + 1 };
case "DECREASE": return { ...state, count: state.count - 1 };
default: return state;
}
};
const reducers = combineReducers({
counter,
...
})
const store = createStore(reducers);
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("app-root");
);
another-component.js
import React from "react";
import { createSelector } from "reselect";
import useReduxState from "redux-state-hook";
const countSelector = createSelector(
state => state.counter.count,
count => count
);
export const AnotherComponent = () => {
const [ count, dispatch ] = useReduxState(countSelector);
return (
<>
<span>Current count is <strong>{count}</strong></span>
<div>
<button onClick={() => dispatch({ type: "INCREASE" })}>Increase</button>
<button onClick={() => dispatch({ type: "DECREASE" })}>Decrease</button>
</div>
</>
);
};