rezolve: A TypeScript repository from smith-chris

Helper functions that reduce flux (Redux, useReducer) boilerplate to the complete minimum. Simple as that.

Best used with Typescript.

Installation

npm i rezolve

yarn add rezolve

Basic Hooks example

The makeResolvers hook creator uses useReducer under the hood.

import React from 'react';
import { makeResolvers } from 'rezolve';

const useCounterResolvers = makeResolvers(
  {
    increment: state => () => state + 1,
    decrement: state => () => state - 1,
    add: state => (amount: number) => state + amount,
  },
  0
);

export const Counter = () => {
  const [state, actions] = useCounterResolvers();

  return (
    <p>
      Clicked: {state} times <button onClick={actions.increment}>+</button>{' '}
      <button onClick={actions.decrement}>-</button>{' '}
      <button onClick={() => actions.add(5)}>Increment by 5</button>{' '}
    </p>
  );
};

Basic Redux example

import { createStore } from 'redux';
import { makeReducer, makeActionCreators } from 'rezolve';

type State = number;

const initialState: State = 0;

const resolvers = {
  increment: (state: State) => (): State => state + 1,
  decrement: (state: State) => (): State => state - 1,
  add: (state: State) => (amount: number): State => state + amount,
};

export const actions = makeActionCreators(resolvers, initialState);
export const reducer = makeReducer(resolvers, initialState);

const store = createStore(reducer);

store.subscribe(() => {
  console.log('Value of the counter is: ', store.getState());
});

store.dispatch(actions.increment()); // Value of the counter is: 1
store.dispatch(actions.decrement()); // Value of the counter is: 0
store.dispatch(actions.add(5)); // Value of the counter is: 5

store.dispatch(actions.foo()); // Error: Property 'foo' does not exist on type [...].
store.dispatch(actions.add('bar')); // Error: Argument of type '"bar"' is not assignable to parameter of type 'number'.

I encourage you to take a look at Counter example repo.

Advanced Redux example

The file structure presented here is just a suggestion, it showcases how you could go about spreding the logic into separate modules. You can also see TodoMVC example for more advanced usage.

src/reducers/counter/resolvers.ts

export type CounterState = number;

export const increment = (state: CounterState) => (): CounterState => state + 1;

export const decrement = (state: CounterState) => (): CounterState => state - 1;

export const add = (state: CounterState) => (amount: number): CounterState =>
  state + amount;

src/reducers/counter/index.ts

import { makeActionCreators, makeReducer } from 'rezolve';
import { CounterState } from './resolvers';
import * as counterResolvers from './resolvers';

export const initialState: CounterState = 0;

export const counterActions = makeActionCreators(
  counterResolvers,
  initialState
);
export const counterReducer = makeReducer(counterResolvers, initialState);

src/reducers/index.ts

import { combineReducers } from 'redux';
import { counterReducer } from './counter';

export const rootReducer = combineReducers({
  counter: counterReducer,
});

src/index.ts

import { createStore } from 'redux';
import { rootReducer } from './reducers';
import { counterActions } from './reducers/counter';

const store = createStore(rootReducer);

store.subscribe(() => {
  console.log('Value of the counter is: ', store.getState().counter);
});

store.dispatch(counterActions.increment()); // Value of the counter is: 1
store.dispatch(counterActions.decrement()); // Value of the counter is: 0
store.dispatch(counterActions.add(5)); // Value of the counter is: 5

store.dispatch(actions.foo()); // Error: Property 'foo' does not exist on type [...].
store.dispatch(actions.add('bar')); // Error: Argument of type '"bar"' is not assignable to parameter of type 'number'.

Support

Please open an issue for support.

Contributing