All Projects → robertgonzales → Compare React State Management

robertgonzales / Compare React State Management

React createContext vs Apollo vs MobX vs Redux in a simple todo app.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Compare React State Management

Reactstatemuseum
A whirlwind tour of React state management systems by example
Stars: ✭ 1,294 (+1497.53%)
Mutual labels:  apollo, state-management, mobx
ngx-mobx
Mobx decorators for Angular Applications
Stars: ✭ 14 (-82.72%)
Mutual labels:  state-management, mobx
mst-effect
💫 Designed to be used with MobX-State-Tree to create asynchronous actions using RxJS.
Stars: ✭ 19 (-76.54%)
Mutual labels:  state-management, mobx
hooksy
Simple app state management based on react hooks
Stars: ✭ 58 (-28.4%)
Mutual labels:  state-management, mobx
Pulse
✨ Pulse is a global state and logic framework for reactive Typescript & Javascript applications. Supporting frameworks like VueJS, React and React Native.
Stars: ✭ 243 (+200%)
Mutual labels:  state-management, mobx
Next Starter
Next.js Starter using GraphQL, MobX (Next.js, TypeScript, Babel, Express.js, Apollo Client, React Apollo, React Apollo Hooks, GraphQL Codegen, MobX, mobx-state-tree, styled-components, next-optimized-images, Serverless Framework, AWS Lambda, Dotenv)
Stars: ✭ 90 (+11.11%)
Mutual labels:  apollo, mobx
mutable
State containers with dirty checking and more
Stars: ✭ 32 (-60.49%)
Mutual labels:  state-management, mobx
Xsm
State Management made eXtraordinarily simple and effective for Angular, React, and Vue
Stars: ✭ 138 (+70.37%)
Mutual labels:  state-management, mobx
micro-observables
A simple Observable library that can be used for easy state management in React applications.
Stars: ✭ 78 (-3.7%)
Mutual labels:  state-management, mobx
Flutter Boilerplate Project
A boilerplate project created in flutter using MobX and Provider.
Stars: ✭ 1,194 (+1374.07%)
Mutual labels:  state-management, mobx
Mobx Keystone
A MobX powered state management solution based on data trees with first class support for Typescript, support for snapshots, patches and much more
Stars: ✭ 284 (+250.62%)
Mutual labels:  state-management, mobx
Flutter book
Flutter1.17.x book App,使用Mobx数据管理器支持Android和iOS,使用库json_serializable、json_annotation、dio。
Stars: ✭ 190 (+134.57%)
Mutual labels:  state-management, mobx
Mobx Rest
REST conventions for Mobx
Stars: ✭ 164 (+102.47%)
Mutual labels:  state-management, mobx
Mobx.dart
MobX for the Dart language. Hassle-free, reactive state-management for your Dart and Flutter apps.
Stars: ✭ 2,038 (+2416.05%)
Mutual labels:  state-management, mobx
Blue Chip
Normalizes GraphQL and JSON:API payloads into your state management system and provides ORM selectors to prepare data to be consumed by components
Stars: ✭ 332 (+309.88%)
Mutual labels:  state-management, mobx
NObservable
MobX like observable state management library with Blazor support
Stars: ✭ 66 (-18.52%)
Mutual labels:  state-management, mobx
Prodo
Prodo is a React framework to build apps faster.
Stars: ✭ 114 (+40.74%)
Mutual labels:  state-management, mobx
React Atom
A simple way manage state in React, inspired by Clojure(Script) and reagent.cljs
Stars: ✭ 133 (+64.2%)
Mutual labels:  state-management, mobx
react-coat-ssr-demo
Demo with Typescript + React + Redux for server-side-rendering (SSR)
Stars: ✭ 100 (+23.46%)
Mutual labels:  state-management, mobx
React Coat
Structured React + Redux with Typescript and support for isomorphic rendering beautifully(SSR)
Stars: ✭ 290 (+258.02%)
Mutual labels:  state-management, mobx

This repo is a collection of apps, structured to compare popular React state management libraries. Each app is the exact same todo app, but uses a different state management library. Presentational components and utils are shared, and business logic and container components are analogous.

I hope this repo is useful to anyone that may already be familiar with one library and interested in another.

Use this repo to compare:

  • How state is updated and components are connected.
  • Boilerplate and configuration.
  • Common and best practices.

Libraries implemented:

How to use:

redux-vs-apollo-example

To run the project:

Start the GraphQL server on localhost:8080/graphql:

$ cd server
$ npm install
$ npm start

Start the React client on localhost:3000:

$ cd client
$ npm install
$ npm start

NOTE: You can select the app to render inside client/src/index.js.

In the future I may add more complex usage examples, especially where one library really excels. For example, optimistic UI is really nice in Apollo and interesting to implement in the others. For now I've just tried to keep everything as simple as possible.

Thanks to igorlima for the GraphQL server: https://github.com/igorlima/todo-mongo-graphql-server

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].