Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/robertgonzales/compare-react-state-management
React createContext vs Apollo vs MobX vs Redux in a simple todo app.
https://github.com/robertgonzales/compare-react-state-management
apollo mobx react reactjs redux state-management
Last synced: 2 months ago
JSON representation
React createContext vs Apollo vs MobX vs Redux in a simple todo app.
- Host: GitHub
- URL: https://github.com/robertgonzales/compare-react-state-management
- Owner: robertgonzales
- Created: 2018-01-30T03:00:10.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-02-21T18:02:51.000Z (over 6 years ago)
- Last Synced: 2024-04-23T06:16:36.591Z (2 months ago)
- Topics: apollo, mobx, react, reactjs, redux, state-management
- Language: JavaScript
- Homepage: https://github.com/robertgonzales/compare-react-state-management/tree/master/client/src
- Size: 85.9 KB
- Stars: 81
- Watchers: 2
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Lists
- awesome-react-context - **compare-react-state-management** - React createContext vs Apollo vs MobX vs Redux in a simple todo app. (Examples)
README
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:
- [Apollo](https://www.apollographql.com/docs/react/)
- [MobX](https://mobx.js.org/)
- [Redux](https://redux.js.org/)
- [React.createContext](https://github.com/thejameskyle/create-react-context)
### How to use:
- [See shared presentational components and utils](https://github.com/robertgonzales/compare-react-state-management/tree/master/client/src/shared).
- [Familiarize yourself with implementation of library you already know](https://github.com/robertgonzales/compare-react-state-management/tree/master/client/src).
- [**Compare to another library's state logic and connected components**](https://github.com/robertgonzales/compare-react-state-management/tree/master/client/src).
### 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