Redux Atomic Action

Inspired by Haskell and Angular 2

Core Concept

function createAction() {
    // ...
    return atomicModifyStateAction;
}

Install

npm install --save redux-atomic-action

Usage

import { createStore, applyMiddleware } from 'redux';
import { createAtomicReducer, atomicThunk } from 'redux-atomic-action';
 
const initialState = {
    todos: [],
    visibleFilter: "SHOW_ALL"
}
 
let store = createStore(createAtomicReducer(initialState),
    applyMiddleware(atomicThunk));
 
store.subscribe(() => {
    console.log(store.getState().todos);
    // => ['something']
})
 
function addTodo(todo) {
    return (prevState) => {
        
        let nextState = Object.assign({}, prevState, {
            todos: prevState.todos.concat(todo)
        })
 
        return nextState;
    }
}
 
store.dispatch(addTodo('something'));

Modify State Tree

import { createAtomicReducer, atomicThunk, createStateModifier } from 'redux-atomic-action';
 
// ...
 
let todos = createStateModifier('todos');
 
function addTodo(todo) {
    let ADD_TODO = _todos => _todos.concat([todo]);
 
    return todos(ADD_TODO);
}
 
store.dispatch(addTodo('something'))

let initialState = {
    dashboard: {
        todos: [...]
    }
}
 
let todos = createStateModifier(['dashboard', 'todos'])

Action Name

function addTodo(todo) {
    let ADD_TODO = prev => Object.assign({}, prev, {
            todos: prev.todos.concat(todo)
        })
    
    return ADD_TODO;
}
// action.name === "ADD_TODO"

createStateModifier

let todos = createStateModifier('todos');
 
function addTodo(todo) {
    let ADD_TODO = _todos => _todos.concat([todo]);
    
    return todos(ADD_TODO);
}
// action.name === "ADD_TODO"

name

import { name } from 'redux-atomic-action'; // *alias*: `nameFunc`
 
function addTodo(todo) {
    return name(state =>
        state.update('todos',
            todos => todos.concat([todo])), "ADD_TODO");
}
// action.name === "ADD_TODO"

atomicAction

alias: action

store.dispatch(atomicAction("ADD_TODO", state =>
    state.update('todos', todos =>
        todos.concat([newTodo]))))
 
// action.name === "ADD_TODO"

// Is the same as `name(state => state, "ALARM")`
 
store.dispatch(atomicAction("ALARM"));
// action.name === "ALARM"

Default Reducer

function defaultReducer(state, action) {
    if (["ADD_TODO", "GET_TODO"].indexOf(action.name) !== -1)
    {
        return visibleFilter(() => "SHOW_ALL")(state);
    }
}
 
let store = createStore(createAtomicReducer(initialState, defaultReducer),
    applyMiddleware(atomicThunk));

Async Atomic Action

function getTodos() {
    return api.get('/api/todos')
        .then(todos => pre => Object.assign({}, pre, { todos }));
}
 
getTodos.then(store.dispatch);

Changelog

Visit Github Releases page for more information.