Skip to content
Prodo is a React framework to build apps faster.
TypeScript JavaScript Other
Branch: master
Clone or download
andrejak Merge pull request #181 from prodo-dev/docs-actions-return
Emphasize actions can't return anything earlier on
Latest commit 76a27b6 Oct 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci only deploy on master Sep 13, 2019
docs Merge pull request #181 from prodo-dev/docs-actions-return Oct 18, 2019
examples v0.1.2 Oct 11, 2019
packages
.firebaserc
.gitignore Merge branch 'master' into devtools Sep 18, 2019
.prettierrc git init Aug 20, 2019
CONTRIBUTING.md Update CONTRIBUTING.md Sep 18, 2019
LICENSE.md add LICENSE.md Sep 18, 2019
README.md Merge branch 'master' into docs-slackin Oct 14, 2019
firebase.json add firebase json Sep 12, 2019
lerna.json v0.1.2 Oct 11, 2019
package.json add noop clean for gatsby-plugin Oct 11, 2019
tsconfig.common.json Reenable ts strict mode Sep 11, 2019
tsconfig.json
tsconfig.ui.json git init Aug 20, 2019
tslint.json git init Aug 20, 2019
yarn.lock commit yarn lock Oct 11, 2019

README.md

Prodo

Prodo is a React framework to write performant and scalable web apps with as little boilerplate as possible. View the Documentation. Join us on Slack!

CircleCI npm version npm version

Key benefits

  • 🎉 Drastically simplified state management
  • Absolutely minimal boilerplate, especially compared to Redux
  • ⚡️ Blazingly fast re-rendering, similar to MobX
  • 👯‍♀️ Handles async actions out of the box
  • 🔎 First class support for TypeScript
  • Easily testable
  • 🚀 Less to learn and shorter ramp up time
  • 💪 Powerful plugins for routing, local storage, authentication, database, and more...

Show me the code

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.

Examples

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.

Running an example

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

How to help?

  • Help us gauge interest by starring this repository if you like what you see!
  • Give feedback by opening an issue.
  • Contribute code by opening a PR. See CONTRIBUTING for information on how to contribute code to the project.

Where to go next?

You can’t perform that action at this time.