redux tutorial

action.js

/**
 * action types
 */

export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';

/**
 * other constants
 */

export const VisibilityFilters = {
    SHOW_ALL: 'SHOW_ALL',
    SHOW_COMPLETED: 'SHOW_COMPLETED',
    SHOW_ACTIVE: 'SHOW_ACTIVE'
};

/**
 *  action creators
 */

export function addTodo(text) {
    return {type: ADD_TODO, text};
}

export function toggleTodo(index) {
    return {type: TOGGLE_TODO, index};
}

export function setVisibilityFilter(filter) {
    return {type: SET_VISIBILITY_FILTER, filter};
}

reducer.js

import {combineReducers} from "redux";
import {ADD_TODO, SET_VISIBILITY_FILTER, TOGGLE_TODO, VisibilityFilters} from "./action";

const {SHOW_ALL} = VisibilityFilters;

function visibilityFilter(state = SHOW_ALL, action) {
    switch (action.type) {
        case SET_VISIBILITY_FILTER:
            return action.filter;
        default:
            return state;
    }
}

function todos(state = [], action) {
    switch (action.type) {
        case ADD_TODO:
            return [
                ...state,
                {
                    text: action.text,
                    completed: false,
                }
            ];
        case TOGGLE_TODO:
            return state.map((todo, index) => {
                if (index === action.index) {
                    return Object.assign({}, todo, {
                        completed: !todo.completed
                    })
                }
                return todo
            });
        default:
            return state
    }
}

const todoApp = combineReducers({
    visibilityFilter,
    todos,
});

export default todoApp;

store.test.js

import {createStore} from "redux";
import todoApp from "./reducer";

import {addTodo, setVisibilityFilter, toggleTodo, VisibilityFilters} from "./action";

it('demo', () => {
    const store = createStore(todoApp);

    console.log(store.getState());

    const unsubscribe = store.subscribe(() => console.log(store.getState()));

    store.dispatch(addTodo('Learn about actions'));
    store.dispatch(addTodo('Learn about reducers'));
    store.dispatch(addTodo('Learn about store'));
    store.dispatch(toggleTodo(0));
    store.dispatch(toggleTodo(1));
    store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED));

    unsubscribe();
});