![](\"https://raw.githubusercontent.com/luisvinicius167/dutier/master/img/logo.png\"/){kind=logo}
\n\nThe 2kb immutable, async and universal state management solution for Javascript applications. Count: {state.count}
\n \nCount: {state.count}
\n \n![](\"https://raw.githubusercontent.com/luisvinicius167/dutier/master/img/devtools.png\")
\n\n### Universal\nThe application state is stored in an object tree inside a single store. Your actions will only dispatch information about how work with the state and then return new state values based on your state.\n\nThat's it!\n\n```javascript\nimport { createStore, applyMiddleware } from 'dutier'\nimport Logger from 'dutier-logger'\n\n/**\n * Reducer\n * The reducer state needs to be an Object\n * Each reducer receives the state as first argument\n * the action payload as second argument\n */\nconst initialState = { count: 1 }\nfunction reducer( state=initialState, { type, payload } ) {\n switch (type) {\n case 'INCREMENT':\n return { count: state.count + payload }\n default:\n return state \n }\n}\n\n/**\n * Create the store and pass the reducers if you have.\n * Create store returns the functions: subscribe, dispatch and getState\n */\nconst store = createStore(reducer)\n\n/**\n * Apply your custom middleware function that\n * be called each time your store dispatch actions\n * You can use Dutier Logger library.\n * https://github.com/luisvinicius167/dutier-logger\n */\napplyMiddleware(Logger)\n\n\n/**\n * Actions are pure functions that return a new function\n * that will dispatch the payload information to Reducer\n */\n const increment = payload => dispatch => dispatch({ type: 'INCREMENT', payload })\n\n/**\n * Reducer\n * Each reducer receives the application state as first argument,\n * the action payload\n */\nconst initialState = { count: 1 }\nfunction reducer( state=initialState, { type, payload } ) {\n switch (type) {\n case 'INCREMENT':\n return { count: state.count + payload }\n default:\n return state \n }\n}\n \n/**\n * You can use store.subscribe() to update your UI in response to actions;\n * The subscribe are just be called if the state was changed.\n */\n this.unsubscribe = store.subscribe( { type, state, payload } ) => {\n console.log('Reducer new state value ', state, 'Store state: ', store.getState())\n })\n\n\n/**\n * Use store.dispatch to return new values based on the state\n * tree. store.dispatch is async and returns a Promise with your action type and\n * the new state value.\n */\nstore.dispatch( increment( 1 ) )\n .then( ({ type, state }) => {\n console.log(`The value is: ${getState().count}`) // 2\n })\n```\n\n\n### Simple and efficient API.\n\nstore.dispatch\n * Trigger an action to do something with the state. It's async by default and always return a promise