added setState callback as argument

README.md

@@ -132,16 +132,24 @@ const todoListStore = createStore(
 };
 
 function AddTodo() {
-  const [ { todos }, dispatch ] = useStore(todoListStore);
-
+  const [ state, dispatch ] = useStore('todoList');
+  let input;
+
   const onSubmit = (e) => {
     e.preventDefault();
-    const input = e.target.querySelector('input');
+    input = e.target.querySelector('input');
     const todo = input.value;
-    input.value = '';
-    dispatch({ type: 'add', payload: todo });
+    input.value = '.............';
+    input.disabled = true;
+    dispatch({ type: 'create', payload: todo },todoCreated);
   }
 
+  const todoCreated=(newState)=>{
+  	console.log(newState)
+	input.disabled = false;
+	input.value = '';
+  }
+
   return (
     <form onSubmit={onSubmit}>
       <input></input>
@@ -190,10 +198,10 @@ The store instance that is returned by the createStore and getStoreByName method
 The name of the store;
 #### `getState:Function():*`
 A method that returns the store's current state
-#### `setState:Function(state:*)`
-Sets the state of the store. works if the store does not use a reducer state handler. Otherwise, use `dispatch`
-#### `dispatch:Function(action:*)`
-Dispatchs whatever is passed into this function to the store. works if the store uses a reducer state handler. Otherwise, use `setState`
+#### `setState:Function(state:*,callback:Function)`
+Sets the state of the store. works if the store does not use a reducer state handler. Otherwise, use `dispatch`. callback is Optional and will receive new state as argument
+#### `dispatch:Function(action:*,callback:Function)`
+Dispatchs whatever is passed into this function to the store. works if the store uses a reducer state handler. Otherwise, use `setState`. callback is Optional and will receive new state as argument
 
 ## React API
 ### <a name="api_useStore">`useStore(identifier:String|StoreInterface):Array[state, setState|dispatch]`</a>

example/index.js

@@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', function() {
       <StatefulHello />
       <AnotherComponent />
       <h1>Advanced example</h1>
-      <p>A namespace and reducer-powered store</p>
+      <p>A namespace and reducer-powered store, using callback</p>
       <AddTodo />
       <TodoList />
     </React.Fragment>,

example/reducers.js

@@ -1,67 +1,74 @@
-import React from 'react';
-import { createStore, useStore } from '../src';
-
-// this one is more complex, it has a name and a reducer function
-createStore(
-  'todoList',
-  {
-    idCount: 0,
-    todos: [{ id: 0, text: 'buy milk' }],
-  },
-  (state, action) => {
-    // when a reducer is being used, you must return a new state object
-    switch (action.type) {
-      case 'create':
-        const id = ++state.idCount;
-        return {
-          ...state,
-          todos: [
-            ...state.todos,
-            { id, text: action.payload }
-          ]
-        }
-      case 'delete':
-        return {
-          ...state,
-          todos: state.todos.filter(todo => todo.id !== action.payload)
-        }
-      default:
-        return state;
-    }
-  }
-);
-
-export function AddTodo() {
-  const [ state, dispatch ] = useStore('todoList');
-
-  const onSubmit = (e) => {
-    e.preventDefault();
-    const input = e.target.querySelector('input');
-    const todo = input.value;
-    input.value = '';
-    dispatch({ type: 'create', payload: todo });
-  }
-
-  return (
-    <form onSubmit={onSubmit}>
-      <input></input>
-      <button>Create TODO</button>
-    </form>
-  )
-}
-
-export function TodoList() {
-  // Grab the correct store by specifying its namespace
-  const [ state, dispatch ] = useStore('todoList');
-  const deleteTodo = id => dispatch({ type: 'delete', payload: id })
-  return (
-    <ul>
-      <h2>TODOLIST</h2>
-      { state.todos.map(todo =>
-        <li key={todo.id}>
-          { todo.text } <button onClick={() => deleteTodo(todo.id)} type="button">X</button>
-        </li>)
-      }
-    </ul>
-  )
-}
+import React from 'react';
+import { createStore, useStore } from '../src';
+
+// this one is more complex, it has a name and a reducer function
+createStore(
+  'todoList',
+  {
+    idCount: 0,
+    todos: [{ id: 0, text: 'buy milk' }],
+  },
+  (state, action) => {
+    // when a reducer is being used, you must return a new state object
+    switch (action.type) {
+      case 'create':
+        const id = ++state.idCount;
+        return {
+          ...state,
+          todos: [
+            ...state.todos,
+            { id, text: action.payload }
+          ]
+        }
+      case 'delete':
+        return {
+          ...state,
+          todos: state.todos.filter(todo => todo.id !== action.payload)
+        }
+      default:
+        return state;
+    }
+  }
+);
+
+export function AddTodo() {
+  const [ state, dispatch ] = useStore('todoList');
+  let input;
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    input = e.target.querySelector('input');
+    const todo = input.value;
+    input.value = '.............';
+    input.disabled = true;
+    dispatch({ type: 'create', payload: todo },todoCreated);
+  }
+
+  const todoCreated=(newState)=>{
+	input.disabled = false;
+	input.value = '';
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input></input>
+      <button>Create TODO</button>
+    </form>
+  )
+}
+
+export function TodoList() {
+  // Grab the correct store by specifying its namespace
+  const [ state, dispatch ] = useStore('todoList');
+  const deleteTodo = id => dispatch({ type: 'delete', payload: id })
+  return (
+    <ul>
+      <h2>TODOLIST</h2>
+      { state.todos.map(todo =>
+        <li key={todo.id}>
+          { todo.text } <button onClick={() => deleteTodo(todo.id)} type="button">X</button>
+        </li>)
+      }
+    </ul>
+  )
+}

src/index.js

@@ -49,9 +49,10 @@ export function createStore(name, state = {}, reducer=defaultReducer) {
   const store = {
     state,
     reducer,
-    setState(action) {
+    setState(action,callback) {
       this.state = this.reducer(this.state, action);
       this.setters.forEach(setter => setter(this.state));
+	  if(callback) callback(this.state)
     },
     setters: []
   };