aGuyNamedJonas

// Action constant (File #1)
// constants/ActionTypes.js
export const ADD_TODO = 'ADD_TODO'

// Action creator (File #2)
// actions/index.js
export const addTodo = text => ({ type: types.ADD_TODO, text })

// Reducer (File #3)
// reducers/todos.js

aGuyNamedJonas

import { createSlimReduxStore } from 'slim-redux';

// Create a store with initial state = 0
var store = createSlimReduxStore(0);

// Make sure we see any store changes in the console
store.subscribe(() =>
  console.log(store.getState())
)

aGuyNamedJonas

// Create a store with initial state = 0
var store = createSlimReduxStore(0 /*, yourExistingRootReducer, yourExistingMiddleware*/ );

aGuyNamedJonas

// Register a change with the actionType 'INCREMENT' and the appropriate reducer.
// This returns a change-trigger function (see below)
const increment = store.createChangeTrigger({
  actionType: 'INCREMENT',
  reducer: (state, payload, action) => {
    return state + payload.value;
  }
});

// Calling increment() will dispatch the following action:

aGuyNamedJonas

// Calling increment() will dispatch the following action:
// {type: 'INCREMENT', payload: {value: 10}}
increment({value: 10});

/*
  This will be picked up by your reducer:
  
  reducer: (state, payload, action) => {  
    return state + payload.value;
  }

aGuyNamedJonas

var decrement = store.createChangeTrigger({
  actionType: 'DECREMENT',
  reducer: (state, payload, action) => {
    const value = payload.value || 1;
    return state - value;
  },

  // Payload validation - notice how it returns either reject() with a message or
  // accept() to let slim-redux know whether the validation passed or not.
  payloadValidation: (payload, accept, reject) => {

aGuyNamedJonas

import React from 'react';
import ReactDOM from 'react-dom';
import { createSlimReduxStore } from 'slim-redux';
import { slimReduxReact, Provider } from 'slim-redux-react';

// STEP #1: Create the slim redux store
// This creates a redux store with the slim-redux functionality injected and the internal reducer initialized 
// Parameters: initialState (0), existingRootReducer(null), middleware(redux-devtools browser extension)
const store = createSlimReduxStore(0, null, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

aGuyNamedJonas

// changes/todo.js
import { changeTrigger } from 'slim-redux';

export const addTodo = changeTrigger('ADD_TODO', (label, state) => {
  const newId = state.todos.map((max, todo) => Math.max(max, todo,id), 0) + 1;
  return {
    ...state,
    todos: [
      ...state.todos,
      {id: newId, label: label, checked: false},

aGuyNamedJonas

// async/todo.js
import { asyncChangeTrigger } from 'slim-redux-react';
import { addTodoPending, addTodoSuccess, addTodoFailed } from '../changes/todo';

// First argument is a change trigger mapping
export const addTodo = asyncChangeTrigger({ addTodoPending, addTodoSuccess, addTodoFailed }, (label, state) => {
  // Create todo in state pending confirmation from server
  const newTodoAction = addTodoPending(label);  
  const newTodoId = newTodoAction.payload.id;

aGuyNamedJonas

// computations/todo.js
import { compute } from 'slim-redux-react';

export const visibleTodos = compute({
  todos: 'state.todos',
  filter: 'state.filter',
}, () => {
  // Notice how this function has no parameters, but returns a state computation
  return todos.filter(todo => (filter === 'ALL' || ('filter' === 'COMPLETED' && todo.completed) || (filter === 'OPEN' && !todo.completed)))
});