Understanding the basic concepts of Redux and let you know what actually the actions and reducers are

1. REDUX JS

2. Content
● Architecture of Redux
● Actions
● Reducers
● Store
● Containers and Components

3. Redux
Architecture revolves around a strict unidirectional dataflow

4. Actions
● An action is a plain object that represents an intention to change the state.
● Actions are the only way to get data and update into the store.
● Simply that represent the fact about “what happened”.
● Example
export Const USER_LOGIN = 'USER_LOGIN';
export var userlogin=(data) =>
({
type: USER_LOGIN,
payLoad: data
})
● Actions must have a type field that indicates the type of action being performed.
● Where as Payload is optional.If u want to upload anything then only u have to pass payload
otherwise not required.
● Refer Here :- http://redux.js.org/docs/basics/Actions.html

5. Reducers
● A reducer (also called a reducing function) is a function that accepts an accumulation and a value
and returns a new accumulation.
● Simply the reducer is a pure function that takes the previous state and an action, and returns the
next state.
type Reducer<S, A> = (state: S, action: A) => S
● Reducers are used to update the state according to those actions triggered.
● Designing the state shape is very important.
● Basic syntax:
● (previous State,action) => newState
export const Reducer_Name(previous_state/initial State ,action) => {
switch(action.type)
case (action) {
return() //returns new state finally
}
}
● We don't mutate the state. We create a copy with Object.assign(). Object.assign(state, {
visibilityFilter: action.filter }) is also wrong: it will mutate the first argument. You must supply an
empty object as the first parameter.
● Note :- Do not put API calls into reducers
● Refer Here :- http://redux.js.org/docs/basics/Reducers.html

6. Combine Reducers
● Combine reducer are used to combine to combine several reducers into one.
● Basic syntax:
Const App_Reducer = combineReducer ({
reducer_1: Reducer_1,
reducer_2:Reducer_2,
reducer_3:Reducer_3
});
export default App_Reducer ;
● Now this App_Reducer can is used to createStore for your Application using
createStore(reducer)
Syntax :- let store = createStore(App_reducer).

7. Store
● Reducers + Actions.
● A store is an single object that holds the entire application's state tree.
● There should only be a single store in your app.
● Methods:-
Allows state to be updated via dispatch (action)
Allows access to state via getState()
Registers listeners via subscribe(listener)
● Every time the state changes,subscribe logs automatically Calls the reducer.
● Holds the application state.
● Src :- http://redux.js.org/docs/basics/Store.html

8. Integrating with react:
Passing the Store: All container components need access to the Redux store
1.One option would be to pass it as a prop to every container component
2.use a special React Redux component called <Provider> to make the store available to all container components in the
application without passing it explicitly.
Basic syntax:
import todoApp from './reducers'
Let store =createStore(appReducer);
return (
<provider store={{store}} ><App/></provider>
document.getElementById('root')
);
Refer Here : https://www.npmjs.com/package/redux-logger

9. Methods to access them in component:
[mapStateToProps(state, [ownProps]): stateProps] (Function):
● That tells how to transform the current Redux store state into the props you want to pass to a
component you are wrapping.
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):
● That receives the dispatch() method and returns callback props that you want to inject into the
component.
● Src :- https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

10. Loggers for redux(Integration)
● npm i --save redux-logger install
import { applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger'
let logger= createLogger({...options});
Pass this logger to applymiddleware as second argument for createStore
const store = createStore(reducer,applyMiddleware(logger));
Src :- https://www.npmjs.com/package/redux-logger

11. Persist and Rehydrate a redux store.
npm i --save redux-persist
import {compose, applyMiddleware, createStore} from 'redux'
import {persistStore, autoRehydrate} from 'redux-persist'
(note: `autoRehydrate` is not a middleware)
const store = createStore(
reducer,
compose(
applyMiddleware(...),
autoRehydrate()
)
)
persistStore(store)
.
Src :- https://www.npmjs.com/package/redux-persist
The autoRehydrate() enhancer
forces the app to “rehydrate”
(a.k.a. reload) the persisted app
state on startup.
Combining these two results in
showing the user the very same
screen where they left the app,
even if it was closed in the
meantime.

12. Final OverView of Redux
● Redux is a JavaScript library that aims to simplify how we manage stateful data.
● Redux keeps all of our data in a single JS object called the Store.
● A single function, the reducer, is responsible for making modifications to the Store.
● We trigger the reducer by 'dispatching' an action - a JS object that describes how our data should
change.
● The reducer function receives the action as an argument and makes changes accordingly.
● Other parts of the code (usually React Components) can subscribe to data in the Store.
● When data changes, Redux notifies subscribers of the change.

13. Reference
● http://redux.js.org (Official Doc for Redux).