Redux Fluent
Tiny and eloquent way to manage a redux-like state manager (3K, dependencies free, definitions included).
Try it out on RunKit
Documentation
- Action
- Reducer
- CombinableReducers
Motivation
Redux is great, every recent web application was most likely been built on top of it, however we really think we can simplify it further and, after our investigation, we came out with:
- Reducers tend to grow and become hard to maintain, 'cause of the amount of switch-cases.
- Concepts such as Action, Action Type and Action Creator could be squashed into only one.
- FSA action may have
error = true
but this involves IF Statements
inside reducers, so, developers tend to have separate cases
via ACTION_SUCCESS
and ACTION_ERROR
. - Uncontrolled scaffolding growth.
Why not redux-actions? It does merge the concepts of Action
and Reducer
while we think an action should only describe the state changes and not provide any implementation. Actions may be handled by multiple reducers or middlewares.
Installation
npm install --save redux-fluent
Getting Started
import { createAction, createReducer } from 'redux-fluent';
const addTodo = createAction('@@todos | add');
const addTodoTask = (state, { payload }) => ({
...state,
list: state.list.concat(payload),
});
const todosReducer = createReducer('@@todos')
.case(addTodo)
.then(addTodoTask)
.default()
;
export { todosReducer, addTodo };
import { createStore, combineReducers } from 'redux';
import { createCombinableReducers } from 'redux-fluent';
import { otherReducer } from './otherReducer';
import { todosReducer, addTodo } from './todosReducer';
const reducers = combineReducers(
createCombinableReducers(todosReducer, otherReducer),
);
const store = createStore(reducers);
store.dispatch(
addTodo({
id: 1,
title: 'Walk Gipsy',
}),
);