# reshow-flux-base

> Simplify state management with no dependencies, yet powerful.

Latest version **1.1.13** (published 2024-12-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install reshow-flux-base
pnpm add reshow-flux-base
yarn add reshow-flux-base
bun add reshow-flux-base
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.1.13 |
| Published | 2024-12-27 |
| First published | 2018-09-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Hill |
| Maintainers | hillliu |
| Keywords | state, global-state, state-management, flux, reducer, reshow-flux |

## Links

- npm: https://www.npmjs.com/package/reshow-flux-base
- Repository: https://github.com/react-atomic/reshow
- Homepage: https://github.com/react-atomic/reshow/tree/main/packages/reshow-flux-base
- Issues: https://github.com/react-atomic/reshow/issues
- npm.io page: https://npm.io/package/reshow-flux-base

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 1.1.13 (latest) — 2024-12-27
- 1.1.12 — 2024-12-27
- 1.1.11 — 2024-12-27
- 1.1.10 — 2024-12-26
- 1.1.9 — 2024-12-26
- 1.1.8 — 2024-09-04
- 1.1.7 — 2024-09-04
- 1.1.6 — 2024-07-25
- 1.1.5 — 2024-07-25
- 1.1.4 — 2024-07-25
- 1.1.3 — 2024-07-25
- 1.1.2 — 2024-07-24
- 1.1.1 — 2024-07-24
- 1.1.0 — 2024-07-24
- 1.0.0 — 2024-03-20
- … 122 more at https://npm.io/package/reshow-flux-base/versions

## README

# `createReducer`

> `Similar with react useReducer, but let you use anywhere.`

-   GIT
    -   https://github.com/react-atomic/reshow/tree/main/packages/reshow-flux-base
-   NPM
    -   https://www.npmjs.com/package/reshow-flux-base

## Usage

Accepts a reducer function of type `(state, action) => newState`.
Returns a new store with a dispatch method.

```js
import { createReducer } from "reshow-flux-base";

/**
 * reducer -> (state, action) => newState
 */
const [store, dispatch] = createReducer(reducer, initial[Arg | Function]);
```

### `Store` methods.

| _Methods_      | _Explain_                                                        |
| -------------- | ---------------------------------------------------------------- |
| getState       | Return current state.                                            |
| addListener    | You could register any callback function such as react useState. |
| removeListener | Remove register callback, such as unmount a component.           |

## `Full App Example`

```js
const initialState = { count: 0 };

function reducer(state, action) {
    switch (action.type) {
        case "increment":
            return { count: state.count + 1 };
        case "decrement":
            return { count: state.count - 1 };
        default:
            throw new Error();
    }
}

const [store, dispatch] = createReducer(reducer, initialState);

function Counter() {
    const [state, setState] = useState(() => store.getState());
    useEffect(() => {
        store.addListener(setState);
        return () => {
            store.removeListener(setState);
        };
    }, []);

    return (
        <>
            Count: {state.count}
            <button onClick={() => dispatch({ type: "decrement" })}>-</button>
            <button onClick={() => dispatch({ type: "increment" })}>+</button>
        </>
    );
}
```

## Codesandbox

https://codesandbox.io/s/reshow-flux-base-34umk

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