Prodo is a React framework to write performant and scalable web apps with as little boilerplate as possible. View the Documentation. Read more about the motivation behind Prodo on our blog. Join us on Slack!
Define your model:
// src/model.ts
import { createModel } from "@prodo/core";
interface State {
count: number;
}
export const model = createModel<State>();
export const { state, watch, dispatch } = model.ctx;
Use your state:
// src/index.tsx
import { model, state, dispatch, watch } from "./model";
const changeCount = (amount: number) => {
state.count += amount;
};
const App = () => (
<div>
<button onClick={() => dispatch(changeCount)(-1)}>-</button>
<h1>Count: {watch(state.count)}</h1>
<button onClick={() => dispatch(changeCount)(1)}>+</button>
</div>
);
const { Provider } = model.createStore({
initState: {
count: 0,
},
});
ReactDOM.render(
<Provider>
<App />
</Provider>,
document.getElementById("root"),
);
As you can see in the above example, the state type was used once and everything else is automatically inferred.
There are some examples on CodeSandbox that you can view and edit.
There are also many example apps that use Prodo in examples/
. We recommend
looking at.
examples/todo-app
examples/kanban
Navigate to the example directory. For example:
cd examples/todo-app
Install dependencies
yarn
Run development server
yarn start
Navigate to localhost:8080.
Some examples have tests. You can run the tests with
yarn test