Srimmer
Srimmer provides simple api to use react, immer and TypeScript.
inspired react-copy-write
.
API
import { define, Select } from "srimmer";
export { Select };
type State = {
todos: {
name: string;
status: string;
}[];
};
const defined = define<State>();
export const {
Provider,
update,
patches,
select,
get,
set
} = defined;
Real World Usage
define your state (src/state/index.ts)
import { define, Select } from 'srimmer';
export type State = { ... };
export const {
Provider,
select,
update,
patches,
get,
set
} = define<State>();
export { Select };
define your action (src/action/index.ts)
import { update } from "../../state";
export const addNewTask = () => {
update(state => {
state.todos.push({
name: `new todo ${state.todos.length}`,
status: "todo"
});
});
};
bootstrap (src/index.tsx)
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "./state";
ReactDOM.render(
<Provider state={createInitialState()}>
<App />
</Provider>,
document.getElementById("app")!
);
function createInitialState() {
return JSON.stringify(document.getElementById("app")!.getAttribute("data"));
}
consume state (src/component/*/.tsx)
import { select, Select } from '../../state';
import { addNewTask } from '../action';
const Consumer = select(state => ({
todos: state.todos
}));
export default () => (
<Consumer>
{state => (
<button onClick={() => onAddButtonClick(state)}>add</button>
<div>{todos(state)}</div>
)}
</Consumer>
);
const todos = (state: Select<typeof Consumer>) => {
return state.todos.map(todo => (
<div key={todo.id}>{todo.name} - {todo.status}</div>
));
}
const onAddButtonClick = () => {
addNewTask();
};
testing your updater (test/action/index.test.ts)
import diff from 'snapshot-diff'; # https:
import { set, get } from '../../../src/state';
import { addNewTask } from '../../../src/action';
beforeEach(() => {
set({ ...fixture });
});
test('addNewTask', () => {
const state = get()!;
addNewTask();
expect(diff(state, get()!)).toMatchSnapshot();
});
Recommended Structure
/src
/state
index.ts
/action
index.ts
/component
index.tsx
index.tsx
See hrsh7th/ganttcharty
.