Redux

• Redux is Predictable State Container
• It Provides Global store(state) access which can be access throughout application
• Redux has 3 main concepts Action,Dispatcher and Reducer
• Action is basing text which describes what do you want to do with store
• Dispatcher is basically calls reducer by passing appropriate action
• Reducer is function where all logic is written ,and based on Action it performs operation As state in 1st point its is Predictable ,because anything which needs to deal with store has to explicitly call action and through it can update store and its pure function in nature which knows input and output

How to use Redux

• To use in react we need to install to packages react-redux and redux
• As store should accessible across application it should wrap with store
• Inside App.js,or index.js wrap it with Provider(it is imported from react-redux)
• Example

  //inside index.js
  ReactDOM.render( 
  <Provider store={store}> 
  <App/>
  </Provider>,document.getElementById('root')
   )
  

• Create store/redux named folder
• Inside that create 3 other name as Action,Reducer,Dispatcher and inside all create index.js file

  Action

• index of this folder will contain object with key value pair of action.
• this we can directly access with its object nam so very time we don't need to type all string text,and also it's manageable
• Example

    const actionTypes={
    SET_LOGIN_STATE:'SET_LOGIN_STATE',
    SET_LOGOUT_STATE: 'SET_LOGOUT_STATE'
    }
   export default actionTypes
  

  Reducer

• Inside this folder depend on type of used you can create seperate file for each reducer

• This fie will contain initialState Object,and reducer function to perform operation and will import actions

• Example

    //appreducer.js file
     import actionTypes from './Actions'
  
     const intialState={
        loader:false,
         userType:'',
          isLoggedIn:false,
          token:''
        }
  
    const appReducer=(state=intialState,action)=>{
  
    Switch(action.type)
         {
            case actionTypes.SET_LOGIN_STATE:
                localStorage.setItem('isLoggedIn', 'true');
                 localStorage.setItem('authToken', `${action.payload.access_token}`);
                 return {..state,isLoggedIn:true}
            default://this is also important dont' ignore it
                 return state
            }
  
         }
  

  Store Index

• Inside this file import all other reducer file
• and combine them and create store

• Example

       import { createStore, combineReducers } from "redux";
       import DashboardReducer from "./reducers/dashboardReducer";
       import AppReducer from "./reducers/appReducer";
       import FilterReducer from "./reducers/filterReducer";
  
      const AllReducers = combineReducers({
       appReducer: AppReducer,
       dashboardReducer: DashboardReducer,
       filterReducer: FilterReducer,
     });
  
  const store = createStore(AllReducers);
  
  export default store;
  

Inside Component

• To use inside any component firs do wrap main component with provider
• import connect from react-redux in component in which you want to access store
• we can access mapped data or function using props

• Example

  
  //at the end of componenty add folloing code
  
  const mapStateToProps = (state) => {
      return {
       isLoggedIn: state.appReducer.isLoggedIn,
             };
       };
  
  //dispatch to props
  const mapDispatchToProps = (dispatch) => {
     return {
            setLoggedIn: (loginData) =>
            dispatch({
                 type: ActionTypes.SET_LOGIN_STATE,
                  payload: loginData,
                }),
            hideLoader: () =>
            dispatch({
                 type: ActionTypes.HIDE_SCREEN_LOADER,
                      }),
           showLoader: () =>
           dispatch({
                  type: ActionTypes.SHOW_SCREEN_LOADER,
                      }),
                  };
                };
  
  export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);
  

Thank You