This small library is inspired by redux and is as small.
This is mostly here to inrtroduce a new concept called reducible. Redux encourages you to have
separate files for you reducers and your components (react, etc...). Yet Graph-QL encourages you
to have your component and the data it needs in the same file.
This new concept tries to have the best of both worlds. With a trade-off of cource. You'll lose hydration/dehydration.
A reducible is an object/class/module that has data and a [REDUCER] method:
import { REDUCER } from 'reducible-state';
export interface Reducible {
[REDUCER](action: Action<any>): this;
};As an example take the following class:
import { REDUCER } from 'reducible-state';
class MyState implements Reducible {
public readonly value: string;
public constructor(value: string) {
this.value = value;
}
public [REDUCER](action: Action<any>): this {
if (action.type === 'MY_ACTION') {
return new MyState(action.payload);
}
return this;
}
}You can then use and build an initial state for your component:
import React from 'react';
import { combineReducibles } from 'reducible-state';
import MyState from './MyState';
const initialState = combineReducibles({
myState: new MyState(),
});
type Props = { state: typeof initialState };
class MyComponent extends React.Component<Props> {
public render() {
const { state: { myState } } = this.props;
return <div>{myState.value}</div>;
}
}
// Later on how to patch state with MyComponentYou can install this package with the following command:
npm install reducible-stateThe typescript type definitions are also available and are installed with npm.
This project is licensed under the MIT license.