Created
July 21, 2015 10:34
-
-
Save gocreating/72f81cc4867988ca6f04 to your computer and use it in GitHub Desktop.
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
// flux.js | |
var Alt = require('alt'); | |
export default class Flux extends Alt { | |
constructor() { | |
super(); | |
this.addActions('ActionCreators', require('./actions/TodoActions')); | |
this.addStore('TodoStore', require('./stores/TodoStore')); | |
} | |
} | |
// routes.js | |
require('babel/register'); | |
import React from 'react'; | |
import {Route, DefaultRoute} from 'react-router'; | |
var MainLayout = require('../views/layout/main.jsx'); | |
var Home = require('../views/general/home.jsx'); | |
var About = require('../views/general/about.jsx'); | |
var Todo = require('../views/general/todo.jsx'); | |
export default ( | |
<Route name="top" handler={MainLayout} path="/"> | |
<Route name="about" handler={About} path="about" /> | |
<Route name="todo" handler={Todo} path="todo" /> | |
<DefaultRoute handler={Home} /> | |
</Route> | |
); | |
// server.js (partial) | |
require('babel/register'); | |
import errors from '../errors/'; | |
import React from 'react'; | |
import Router from 'react-router'; | |
import routes from './routes'; | |
let alt = require('../alt'); | |
let Flux = require('../flux'); | |
export default (app) => { | |
app.use((req, res) => { | |
Router.run(routes, req.path, (Handler, state) => { | |
var flux = new Flux(); | |
var f = flux.flush(); | |
console.log(f); | |
var element = React.createElement(Handler, {flux: flux}); | |
var html = React.renderToString(element); | |
res.send('<!DOCTYPE html>' + html); | |
}); | |
}); | |
// 404 page not found | |
app.use((req, res, next) => { | |
next(new errors.pageNotFound()); | |
}); | |
}; | |
// todo.jsx | |
import React from 'react'; | |
import TodoStore from '../../stores/TodoStore'; | |
export default class TodoView extends React.Component { | |
static getStores() { | |
return [TodoStore]; | |
} | |
static getPropsFromStores() { | |
return TodoStore.getState(); | |
} | |
getDefaultProps() { | |
return { | |
todos: TodoStore.todos, | |
}; | |
} | |
render() { | |
return ( | |
<div> | |
<ul> | |
{this.props.todos.map((todo) => { | |
return ( | |
<li key={todo.id}>{todo.text}</li> | |
); | |
})} | |
</ul> | |
</div> | |
); | |
} | |
} | |
// TodoActions.js | |
import alt from '../alt'; | |
class TodoActions { | |
updateTodo(id, text) { | |
return { id, text }; | |
} | |
} | |
export default alt.createActions(TodoActions); | |
// TodoStore.js | |
import alt from '../alt'; | |
import TodoActions from '../actions/TodoActions' | |
class TodoStore { | |
constructor() { | |
this.bindListeners({ | |
updateTodo: TodoActions.updateTodo, | |
}); | |
this.state = { | |
todos: [ | |
{id: 1, text: 'haha'}, | |
], | |
}; | |
} | |
updateTodo(todo) { | |
this.setState({ todos: this.state.todos.concat(todo) }); | |
} | |
} | |
export default alt.createStore(TodoStore, 'TodoStore'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment