An experiment in fully hot-reloadable Flux.
The API might change any day.
Don't use in production.
Read The Evolution of Flux Frameworks for some context.
- Hot reloading of everything.
- A hook for the future devtools to "commit" a state, and replay actions on top of it during hot reload.
- No
createAction,createStores,wrapThisStuff. Your stuff is your stuff. - I don't mind action constants. Seriously.
- Embrace decorators for React components.
- Keep Flux lingo. No cursors or observables in core.
- Have I mentioned hot reloading yet?
git clone https://github.com/gaearon/redux.git redux
cd redux
npm install
npm start
// 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);
};
}
// Could also look into state in the callback form
export function incrementIfOdd() {
return (dispatch, state) => {
if (state.counterStore.counter % 2 === 0) {
return;
}
dispatch(increment());
};
}// ... 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 increment({ counter }) {
return { counter: counter + 1 };
}
function decrement({ counter }) {
return { counter: counter - 1 };
}
// what's important is that Store is a pure function too
export default function counterStore(state = initialState, action) {
// that returns the new state when an action comes
switch (action.type) {
case INCREMENT_COUNTER:
return increment(state, action);
case DECREMENT_COUNTER:
return decrement(state, action);
default:
return state;
}
}
// bonus: no special support needed for ImmutableJS,
// just return its objects as the 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 inject 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';
// Prefer to use existing dispatcher
const dispatcher =
module.hot && module.hot.data && module.hot.data.dispatcher ||
createDispatcher();
// Pass (potentially hot-reloaded) stores and actions
dispatcher.receive(stores, actions);
// Store the dispatcher for the next hot reload
if (module.hot) {
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 {
/* ... */
}- http://webpack.github.io/docs/hot-module-replacement.html
- http://gaearon.github.io/react-hot-loader/
- those
module.hotlines in the dispatcher example above
I'm not super happy about strings. If you find a better way, let me know and file an issue with your suggestions.
I wouldn't. Many use cases are not be considered yet. If you find some use cases this lib can't handle yet, please file an issue.