# ReactJS REDUX Summary
### Using stores and reducers
#### A simple example
```
import {createStore} from 'redux'
var reducer_1 = (state, action) => {
console.log('reducer_0 was called with state', state, 'and action', action);
};
var store_1 = createStore(reducer_1);
```
#### Real world example
```
import {createStore} from 'redux'
var reducer_1 = (state = {}, action) => {
switch(action.type) {
case '':
return {
...state,
message: action.value
};
default:
return state;
}
};
var store_1 = createStore(reducer_1);
```
#### Combining reducers
```
import {combineReducers, createStore} from 'react';
var userReducer = (state = {}, action) => {
switch(action) {
case 'ADD_USER':
return {
//Return modified state
};
default:
return state;
}
};
var itemReducer = (state = [], action) => {
switch(action) {
case 'ADD_ITEM':
return {
//Return modified state
};
default:
return state;
}
};
var reducers = combineReducers(user: userReducer, item: itemReducer);
var store = createStore(reducers);
console.log(store.getState());
// {
// user: {}, // {} is the slice returned by our userReducer
// items: [] // [] is the slice returned by our itemsReducer
// }
```
### Dispatching an action
Flow of application: ActionCreator -> Action -> dispatcher -> reducer
#### Without action creator
```
import {combineReducers, createStore} from 'react';
var userReducer = (state = {}, action) => {
switch(action) {
case 'ADD_USER':
return {
//Return modified state
};
default:
return state;
}
};
var itemReducer = (state = [], action) => {
switch(action) {
case 'ADD_ITEM':
return {
//Return modified state
};
default:
return state;
}
};
var reducers = combineReducers(user: userReducer, item: itemReducer);
var store = createStore(reducers);
store.dispatch({type: 'ACTION'});
```
#### With Action Creator (Adopted from Flux)
```
import {combineReducers, createStore} from 'react';
var userReducer = (state = {}, action) => {
switch(action) {
case 'ADD_USER':
return {
//Return modified state
};
default:
return state;
}
};
var itemReducer = (state = [], action) => {
switch(action) {
case 'ADD_ITEM':
return {
//Return modified state
};
default:
return state;
}
};
var reducers = combineReducers(user: userReducer, item: itemReducer);
var store = createStore(reducers);
var addItemActionCreator = (name) => {
return {
item: name,
type: 'ADD_ITEM'
};
};
store.dispatch(addItemActionCreator);
```
#### Async Action with Middleware
```
import {combineReducers, createStore, applyMiddleware} from 'react';
var userReducer = (state = {}, action) => {
switch(action) {
case 'ADD_USER':
return {
//Return modified state
};
default:
return state;
}
};
var itemReducer = (state = [], action) => {
switch(action) {
case 'ADD_ITEM':
return {
//Return modified state
};
default:
return state;
}
};
//Set the state after 2s
var addItemActionCreator = (name) => {
return (dispatch) => {
setTimeout(() => {
dispatch({
item: name,
type: 'ADD_ITEM'
});
}, 2000);
};
};
// 1) The first level provide the dispatch function and a getState function (if your
// middleware or your action creator needs to read data from state) to the 2 other levels
// 2) The second level provide the next function that will allow you to explicitly hand over
// your transformed input to the next middleware or to Redux (so that Redux can finally call all reducers).
// 3) the third level provides the action received from the previous middleware or from your dispatch
// and can either trigger the next middleware (to let the action continue to flow) or process
// the action in any appropriate way.
var thunkMiddleware = ({dispatch, getState}) => {
return (next) => {
return (action) => {
return typeof action === 'function' ? action(dispatch, getState) : next(action);
}
};
};
var reducers = combineReducers(user: userReducer, item: itemReducer);
var finalCreateStore = applyMiddleware(thunkMiddleware)(createStore);
var store = finalCreateStore(reducers);
store.dispatch(addItemActionCreator);
```
### Subscribing to a Store
```
import {createStore} from 'redux'
var reducer_1 = (state = {}, action) => {
switch(action.type) {
case '':
return {
...state,
message: action.value
};
default:
return state;
}
};
var store_1 = createStore(reducer_1);
store_1.subscribe(() => {
//Update react views
});
```