react-duck

React Duck

Implement ducks in react following the redux pattern but using React Context.

Usage

Create the ducks for each slice of application logic.

// duck/counter.js
export default createDuck({
    name: "counter",
    initialState: 0,
    reducers: {
        increment: (state) => state + 1,
    },
});

Create the root reducer from all the duck reducers.

// reducer.js
export default createRootReducer(counterDuck, otherDuck);

Create the global context.

// context.js
export default createContext(rootReducer, preloadedState);

Use the state and actions in your component.

// app.jsx
export default function App(props) {
    const { state, dispatch } = React.useContext(Context);
    const increment = React.useCallback(
        () => dispatch(counterDuck.actions.increment()),
        [dispatch],
    );
    return (
        <div>
            Count: <span>{state[counterDuck.name]}</span>
            <button onClick={increment} />
        </div>
    );
}

Wrap the application in the root provider to handle state changes.

// index.jsx
const rootElement = document.getElementById("root");
const Provider = createRootProvider(Context);
ReactDOM.render(
    <Provider>
        <App />
    </Provider>,
    rootElement,
);

Next

• Implement slice selectors and useSelector hook
• Implement asynchronous middleware support

Suggestions

• Use immer to create immutable reducers, see guide.