# redux-state-hook

> A React hook for consuming Redux state

Latest version **1.2.0** (published 2019-04-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-state-hook
pnpm add redux-state-hook
yarn add redux-state-hook
bun add redux-state-hook
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2019-04-18 |
| First published | 2019-04-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 17.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | ourbjorn |
| Keywords | react, redux, hook, react hook, redux hook, state hook, state, shared state |

## Links

- npm: https://www.npmjs.com/package/redux-state-hook
- Repository: https://github.com/ourstudio-se/redux-state-hook
- Homepage: https://github.com/ourstudio-se/redux-state-hook#readme
- Issues: https://github.com/ourstudio-se/redux-state-hook/issues
- npm.io page: https://npm.io/package/redux-state-hook

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2019-04-18
- 1.1.0 — 2019-04-18
- 1.0.2 — 2019-04-12
- 1.0.1 — 2019-04-11

## README

# 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](https://github.com/reduxjs/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](https://github.com/reduxjs/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](https://github.com/ourstudio-se/redux-state-hook/tree/master/example).

## Usage

app.js
```javascript
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
```javascript
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>
        </>
    );
};
```

---
_Source: https://npm.io/package/redux-state-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._