Reshow-flux-base NPM | npm.io

1.0.0 • Published 2 months ago

Install

Weekly downloads

158

License

ISC

Repository

Last release

2 months ago

`createReducer`

Similar with react useReducer, but let you use anywhere.

Usage

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

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`

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

state global-state state-management flux reducer reshow-flux

@everything-registry/sub-chunk-2656 i13n reshow-flux

2 months ago

2 months ago

2 months ago

2 months ago

6 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago