Lightweight Redux enhancements with opinions:
- No UPPERCASE_CONSTANTS. Just use an exported function to name the action, and a destructured object to document the payload.
export function addTodo({ text }) {} // No constants
export function editTodo({ index, text }) {} // Payload is self-documenting
export function completeTodo({ index }) { // Payload can be altered, otherwise defaults to the input.
return { index, dateCompleted: new Date() };
}- Namespacing of actions into sets for better organization.
- Async action support built-in, with convenient dispatching of other actions.
- No switch statements to handle actions, just declare functions matching those exported by the action set.
export const TodoListActions = {
addTodo(state, { text }) {
return state.concat({ text });
},
editTodo(state, { index, text }) {
let newState = state.slice();
newState[index] = { ...newState[index], text };
return newState;
},
completeTodo(state, { index, dateCompleted }) {
let newState = state.slice();
newState[index] = { ...newState[index], dateCompleted };
return newState;
}
}- Reusable reducers, using props to customize the response to actions or initial state.
// Props are passed in as first argument:
export function getInitialState({ initialItems = [] }) {
return {
items: initialItems
};
}- Forward action sets in bulk within reducers to allow easy composition of reducers, such as in collections or other hierarchies.
- Introspection methods encapsulate reducers’ internal state. This removes action creators’ knowledge of the store’s structure, allowing greater code reuse.
- Get a consensus for async actions, such as whether something needs loading, by polling reducers using their introspection methods.
npm install flambeau --save
- See the async redux demo example for a full example of introspection and the features of Flambeau.
- The great flux-comparison project has a Redux + Flambeau example.