| // ------------ | |
| // counterStore.js | |
| // ------------ | |
| import { | |
| INCREMENT_COUNTER, | |
| DECREMENT_COUNTER | |
| } from '../constants/ActionTypes'; | |
| const initialState = { counter: 0 }; |
I've been working with Flux a lot recently, and one of the questions I've been struggling with is in which part of the Flux cycle to put my asynchronous data requests.
Here are some different opinions:
The famous Flux diagram puts them in the action creators.
| /** | |
| * Stores are just seed + reduce function. | |
| * Notice they are plain objects and don't own the state. | |
| */ | |
| const countUpStore = { | |
| seed: { | |
| counter: 0 | |
| }, | |
| reduce(state, action) { |
Hi Nicholas,
I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:
The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't
The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!
Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is
| import { Component } from "React"; | |
| export var Enhance = ComposedComponent => class extends Component { | |
| constructor() { | |
| this.state = { data: null }; | |
| } | |
| componentDidMount() { | |
| this.setState({ data: 'Hello' }); | |
| } | |
| render() { |
| . | |
| ├── actions | |
| ├── stores | |
| ├── views | |
| │ ├── Anonymous | |
| │ │ ├── __tests__ | |
| │ │ ├── views | |
| │ │ │ ├── Home | |
| │ │ │ │ ├── __tests__ | |
| │ │ │ │ └── Handler.js |
| /** Returns a simple relative time string | |
| * @example | |
| * nicetime(new Date()-1e4) == 'Just now' // within the last minute | |
| * nicetime(Date.now()-1e6) == '16m' // within the last hour | |
| * nicetime(Date.now()-1e7) == '2h' // within the last hour | |
| * nicetime('Dec 31, 2014') == '4d' // within the last 7 days | |
| * nicetime('Dec 25, 2014') == 'Dec 25' // over 7 days ago gives a simple date | |
| * nicetime('July 4, 2014') == 'Jul 4, 2014' // over half a year ago adds the year | |
| */ | |
| function nicetime(text) { |
CSS and SVG recreation of the new Google material design loading spinner.
A Pen by Fran Pérez on CodePen.
Imagine a chat server persisting the messages, a simplified Slack chat. The domain is designed in the object-orientated style. In order to get realtime updates, we need to transport events emitted on the model constructor ("static" events) and on a model instance ("instance" events).
While it may not be immediately clear, the example is covering few other important LoopBack concepts too:
loopback.token in REST)loopback.context in REST)What is not covered: