redux-fluent
Tiny and eloquent way to manage a redux-like state manager (~3K, dependencies free, definitions included).
Try it out on RunKit
Documentation
Motivation
Redux is great, every recent web application has most likely been built on top of it. How can we make it even better?
- λ Go Functional, Everything is a function and reducers are built by function composition rather than piling up if and switch-case statements: Let's introduce Redux Fluent Reducers.
- Reducers at scale, due to being handling multiple actions, reducers tend to grow and become difficult to maintain: Let's introduce Redux Fluent Action Handlers.
- Less boilerplate, Flux architecture is usually verbose and some of their concepts, such as
Action
, Action Type
and Action Creator
could all be implemented in a single entity: Let's introduce Redux Fluent Actions. - FSA compliance, FSA Actions may have a
error: boolean
field, which indicates whether the action represents a failure or not. Respecting this pattern leads to a series of if statements inside reducers, compromising both readability and maintainability, so the community normally tends to split error and failures into two separate actions (eg: ADD_TODO_SUCCESS
and ADD_TODO_ERROR
) which reduces cognitive complexity on one hand but produces even more boilerplate on the other. Let's embrace FSA and abstract error handling with filterable action handlers.
Installation
yarn add redux-fluent
Getting Started
import { createAction } from 'redux-fluent';
export const addTodo = createAction('todos | add');
import { createReducer, ofType } from 'redux-fluent';
import * as actions from './todos.actions.js';
const addTodo = (state, { payload }) => state.concat(payload);
export const todos = createReducer('todos')
.actions(
ofType(actions.addTodo).map(addTodo),
)
.default(() => []);
import { createStore } from 'redux';
import { combineReducers } from 'redux-fluent';
import * as actions from './todos.actions.js';
import { todos } from './todos.reducer.js';
const rootReducer = combineReducers(todos, ...);
const store = createStore(rootReducer);
store.getState();
store.dispatch(actions.addTodo({ title: 'Walk Gipsy' }));
store.getState();