# @reactseed/use-redux

> Use redux to drive state with a React hooks

Latest version **1.2.1** (published 2022-05-19) · BSD license · 0 weekly downloads

## Install

```sh
npm install @reactseed/use-redux
pnpm add @reactseed/use-redux
yarn add @reactseed/use-redux
bun add @reactseed/use-redux
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2022-05-19 |
| First published | 2020-06-02 |
| Weekly downloads | 0 |
| License | BSD |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Maintainers | reactseed |
| Keywords | use-redux, reactseed, immer |

## Links

- npm: https://www.npmjs.com/package/@reactseed/use-redux
- Repository: https://github.com/reactseed/reactseed
- Issues: https://github.com/reactseed/reactseed/issues
- npm.io page: https://npm.io/package/@reactseed/use-redux

## Recent versions

- 1.2.1 (latest) — 2022-05-19
- 1.2.0 — 2022-05-19
- 1.1.0 — 2022-04-27
- 1.0.5 — 2022-04-02
- 1.0.4 — 2021-10-09
- 1.0.3 — 2021-03-08
- 1.0.3-alpha.0 — 2021-03-08
- 0.1.0 — 2020-11-17
- 0.0.6 — 2020-11-17
- 0.0.5 — 2020-11-10
- 0.0.3 — 2020-06-08
- 0.0.2 — 2020-06-08
- 0.0.1 — 2020-06-02

## README

# `@reactseed/use-redux`

[![LICENSE][license-image]][license-url] [![npm version][npm-image]][npm-url] [![npm downloads][download-image]][download-url]

[license-image]: https://img.shields.io/badge/license-BSD-blue.svg
[license-url]: https://github.com/reactseed/use-redux/blob/master/LICENSE
[npm-image]: https://img.shields.io/npm/v/@reactseed/use-redux
[npm-url]: https://www.npmjs.com/package/@reactseed/use-redux
[download-image]: https://img.shields.io/npm/dm/@reactseed/use-redux.svg?style=flat-square
[download-url]: https://npmjs.org/package/@reactseed/use-redux

## Live demo

[![Edit useRedux](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/useredux-r5wv3?fontsize=14&hidenavigation=1&theme=dark)

## Features

- Very simple to use, There is only one API.
- Based on immer, easier to manipulate state.
- Say goodbye to cumbersome action/reducer.
- Support typescript.

## Installation

```sh
npm install @reactseed/use-redux immer redux react-redux
# or
yarn add @reactseed/use-redux immer redux react-redux
```

## API

It exports all the APIs of [redux](https://github.com/reduxjs/redux) and [react-redux](https://github.com/reduxjs/react-redux).

### userRedux

```jsx
const [state, callbacks] = useMethods(methods);
```

- **state**: the current state.
- **callbacks**: a set of callbacks corresponding to your methods.
- **methods**: a set of method which modify the state or return new states.

A full example:

[![Edit useRedux-Simple](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/useredux-simple-ntodw?fontsize=14&hidenavigation=1&theme=dark)

A full example with typescript:

[![Edit useRedux-Simple](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/suspicious-panini-pkhlj?file=/src/Hello/index.tsx)

```js
import React from 'react';
import ReactDOM from 'react-dom';
import useRedux, { Provider, createStore } from '@reactseed/use-redux';

const store = createStore(() => ({
  age: 20,
  name: 'reactseed',
}));

const methods = (state) => {
  const { age } = state;
  return {
    updateName: (name) => {
      state.name = name;
    },
    becomeOlder: () => {
      state.age = age + 1;
    },
  };
};

const App = () => {
  const [state, { updateName, becomeOlder }] = useRedux(methods);
  return (
    <div className="App">
      <h1>
        Hello {state.name} ({state.age})
      </h1>
      <input
        onChange={(e) => {
          updateName(e.target.value);
        }}
        value={state.name}
      />
      <br />
      <button onClick={becomeOlder}>Older</button>
    </div>
  );
};

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
```

> Notice：Components using useRedux need to be used in Provider, like this:

```jsx
import { Provider, createStore } from "@reactseed/use-redux";
const store = createStore(() => ({
 name: "reactseed"
}));
...
...
<Provider store={store}>
   <App />
</Provider>
```

## License

`@reactseed/use-redux` is open source software [licensed as BDS](https://github.com/reactseed/use-redux/blob/master/LICENSE).

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