An experiment in fully hot-reloadable Flux.
The API might change any day. Don't use in production.
// Still using constants...
import {
INCREMENT_COUNTER,
DECREMENT_COUNTER
} from '../constants/ActionTypes';
// But action creators are pure functions returning actions
export function increment() {
return {
type: INCREMENT_COUNTER
};
}
export function decrement() {
return {
type: DECREMENT_COUNTER
};
}
// Can also be async if you return a function
// (wow, much functions, so injectable :doge:)
export function incrementAsync() {
return dispatch => {
setTimeout(() => {
dispatch(increment());
}, 1000);
};
}// ... too, use constants
import {
INCREMENT_COUNTER,
DECREMENT_COUNTER
} from '../constants/ActionTypes';
// but you can write this part anyhow you like:
const initialState = { counter: 0 };
function incremenent({ counter }) {
return { counter: counter + 1 };
}
function decremenent({ counter }) {
return { counter: counter - 1 };
}
// what's important is that Store is a pure function too
export default function CounterStore(state, action) {
// ... that has an initial state
if (!state) {
return initialState;
}
// and return the new state when an action comes
switch (action.type) {
case INCREMENT_COUNTER:
return incremenent(state, action);
case DECREMENT_COUNTER:
return decremenent(state, action);
default:
return state;
}
}// We're gonna need some decorators
import React from 'react';
import { observes } from 'redux';
// Gonna subscribe it
@observes('CounterStore')
export default class Counter {
render() {
const { counter } = this.props; // injected by @observes
return (
<p>
Clicked: {counter} times
</p>
);
}
}// We're gonna need some decorators
import React from 'react';
import { observes } from 'redux';
// With multiple stores, you might want to specify a prop mapper as last argument.
// You can also access `props` inside the prop mapper.
@observes('CounterStore', 'TodoStore', (state, props) => ({
counter: state.CounterStore.counter,
todos: state.TodoStore.todos
}))
export default class TodosWithCounter {
/* ... */
}// We're gonna need some decorators
import React from 'react';
import { performs } from 'redux';
// Gonna subscribe it
@performs('increment')
export default class IncrementButton {
render() {
const { increment } = this.props; // injected by @performs
return (
<button onClick={increment}>+</button>
);
}
} // We're gonna need some decorators
import React from 'react';
import { performs } from 'redux';
// With multiple actions, you might want to specify a prop mapper as last argument.
// You can also access `props` inside the prop mapper.
@performs('increment', 'decrement', (actions, props) => ({
increment: props.invert ? actions.decrement : actions.increment,
decrement: props.invert ? actions.increment : actions.decrement
}))
export default class IncrementButton {
/* .... */
}import * as stores from './stores/index';
import * as actions from './actions/index';
import { createDispatcher } from 'redux';
const dispatcher =
module.hot && module.hot.data && module.hot.data.dispatcher ||
createDispatcher();
dispatcher.receive(stores, actions);
module.hot.dispose(data => {
data.dispatcher = dispatcher;
});
export default dispatcher;import React from 'react';
import { provides } from 'redux';
import dispatcher from './dispatcher';
@provides(dispatcher)
export default class App {
/* ... */
}