-
Notifications
You must be signed in to change notification settings - Fork 26.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds mobx example #676
Merged
Merged
Adds mobx example #676
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
beb8ad1
Adds mobx example
fa1bf9d
Fix coding style to match JS Standard
3d94f09
Removes unecessary link
55d0769
Update README.md
fdidron 9511639
Update README.md
fdidron 495480d
Change next version from beta to ^2.0.0-beta
05ee5b8
Merge branch 'master' of github.com:fdidron/next.js
f76e006
Assigns the store to a local var
fa87184
Adds navigation in the example
c38b03a
Removes unecessary imports
a5e6fa3
Fix coding style to match JS Standard
d6af04c
Fix Clock import
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"presets": [ | ||
"next/babel" | ||
], | ||
"plugins": [ | ||
"transform-decorators-legacy" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
|
||
# MobX example | ||
|
||
## How to use | ||
|
||
Download the example (or clone the repo)[https://github.com/zeit/next.js.git]: | ||
|
||
```bash | ||
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-mobx | ||
cd with-mobx | ||
``` | ||
|
||
Install it and run: | ||
|
||
```bash | ||
npm install | ||
npm run dev | ||
``` | ||
|
||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) | ||
|
||
```bash | ||
now | ||
``` | ||
## Notes | ||
This example is a mobx port of the [with-redux](https://github.com/zeit/next.js/tree/master/examples/with-redux) example. Decorator support is activated by adding a `.babelrc` file at the root of the project: | ||
|
||
```json | ||
{ | ||
"presets": [ | ||
"next/babel" | ||
], | ||
"plugins": [ | ||
"transform-decorators-legacy" | ||
] | ||
} | ||
``` | ||
|
||
## The idea behind the example | ||
|
||
Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. This is just a way you can do it but it's not the only one. | ||
|
||
In this example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one. | ||
|
||
![](http://i.imgur.com/JCxtWSj.gif) | ||
|
||
Our page is located at `pages/index.js` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the mobx store and returning the initial timestamp to be rendered. The root component for the render method is the `mobx-react Provider` that allows us to send the store down to children components so they can access to the state when required. | ||
|
||
To pass the initial timestamp from the server to the client we pass it as a prop called `lastUpdate` so then it's available when the client takes over. | ||
|
||
The trick here for supporting universal mobx is to separate the cases for the client and the server. When we are on the server we want to create a new store every time, otherwise different users data will be mixed up. If we are in the client we want to use always the same store. That's what we accomplish on `store.js` | ||
|
||
The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
export default (props) => { | ||
return ( | ||
<div className={props.light ? 'light' : ''}> | ||
{format(new Date(props.lastUpdate))} | ||
<style jsx>{` | ||
div { | ||
padding: 15px; | ||
color: #82FA58; | ||
display: inline-block; | ||
font: 50px menlo, monaco, monospace; | ||
background-color: #000; | ||
} | ||
|
||
.light { | ||
background-color: #999; | ||
} | ||
`}</style> | ||
</div> | ||
) | ||
} | ||
|
||
const format = t => `${pad(t.getHours())}:${pad(t.getMinutes())}:${pad(t.getSeconds())}` | ||
|
||
const pad = n => n < 10 ? `0${n}` : n |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import React from 'react' | ||
import Link from 'next/link' | ||
import { inject, observer } from 'mobx-react' | ||
import Clock from '../components/Clock' | ||
|
||
@inject('store') @observer | ||
class Page extends React.Component { | ||
|
||
componentDidMount () { | ||
this.props.store.start() | ||
} | ||
|
||
componentWillUnmount () { | ||
this.props.store.stop() | ||
} | ||
|
||
render () { | ||
return ( | ||
<div> | ||
<h1>{this.props.title}</h1> | ||
<Clock lastUpdate={this.props.store.lastUpdate} light={this.props.store.light} /> | ||
<nav> | ||
<Link href={this.props.linkTo}>Navigate</Link> | ||
</nav> | ||
</div> | ||
) | ||
} | ||
} | ||
|
||
export default Page |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
{ | ||
"name": "with-mobx", | ||
"version": "1.0.0", | ||
"scripts": { | ||
"dev": "next", | ||
"build": "next build", | ||
"start": "next start" | ||
}, | ||
"dependencies": { | ||
"mobx": "^2.7.0", | ||
"mobx-react": "^4.0.4", | ||
"next": "^2.0.0-beta" | ||
}, | ||
"author": "", | ||
"license": "ISC", | ||
"devDependencies": { | ||
"babel-plugin-transform-decorators-legacy": "^1.3.4" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import React from 'react' | ||
import { Provider } from 'mobx-react' | ||
import { initStore } from '../store' | ||
import Page from '../components/Page' | ||
|
||
export default class Counter extends React.Component { | ||
static getInitialProps ({ req }) { | ||
const isServer = !!req | ||
const store = initStore(isServer) | ||
return { lastUpdate: store.lastUpdate, isServer } | ||
} | ||
|
||
constructor (props) { | ||
super(props) | ||
this.store = initStore(props.isServer, props.lastUpdate) | ||
} | ||
|
||
render () { | ||
return ( | ||
<Provider store={this.store}> | ||
<Page title="Index Page" linkTo="/other" /> | ||
</Provider> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import React from 'react' | ||
import { Provider } from 'mobx-react' | ||
import { initStore } from '../store' | ||
import Page from '../components/Page' | ||
|
||
export default class Counter extends React.Component { | ||
static getInitialProps ({ req }) { | ||
const isServer = !!req | ||
const store = initStore(isServer) | ||
return { lastUpdate: store.lastUpdate, isServer } | ||
} | ||
|
||
constructor (props) { | ||
super(props) | ||
this.store = initStore(props.isServer, props.lastUpdate) | ||
} | ||
|
||
render () { | ||
return ( | ||
<Provider store={this.store}> | ||
<Page title="Other Page" linkTo="/" /> | ||
</Provider> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import { action, observable } from 'mobx' | ||
|
||
let store = null; | ||
|
||
class Store { | ||
@observable lastUpdate = 0 | ||
@observable light = false | ||
|
||
constructor (isServer, lastUpdate) { | ||
this.lastUpdate = lastUpdate | ||
} | ||
|
||
@action start = () => { | ||
this.timer = setInterval(() => { | ||
this.lastUpdate = Date.now() | ||
this.light = true | ||
}) | ||
} | ||
|
||
stop = () => clearInterval(this.timer) | ||
} | ||
|
||
export function initStore (isServer, lastUpdate = Date.now()) { | ||
if (isServer && typeof window === 'undefined') { | ||
return new Store(isServer, lastUpdate) | ||
} else { | ||
if (store === null) { | ||
store = new Store(isServer, lastUpdate) | ||
} | ||
return store | ||
} | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can be just
./Clock
right?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes my bad, also should I remove all the React import ? As I understand it is not required in next.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No here. You need to have it.
It's just for stateless components.
Keep it here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done