Please enable JavaScript.

Coggle requires JavaScript to display documents.

React-JS - Coggle Diagram

- - - - Reset
        
        In the index.css file add the following lines :-
        
        *{
        
        margin : 0;
        
        padding : 0;
        
        box-sizing : border-box;
        
        }
        
        body {
        
        overflow-x : hidden;
        
        }
    - - <div className="App">
        <h1>Hello World!</h1>
        </div>
        
        This is just a synthactical sugar in JavaScript and not an HTML code.
        
        It gets converted to :-
        
        React.createElement('div',{className: 'App'},React.createElement('h1', null, 'Hello World!'));
        
        This is only done by React so don't forget to import it.( and obviously export it wherever you want to use it)
    - - There are two types of components:
        
        Functional components (also referred to as "presentational", "dumb" or "stateless" components => const cmp = () => { return <div>some JSX</div> } (using ES6 arrow functions as shown here is recommended but optional)
        
        class-based components (also referred to as "containers", "smart" or "stateful" components) => class Cmp extends Component { render () { return <div>some JSX</div>} }
        
        Prefer stateless component as often as possible, because we should use state only when needed, as, having state in all the components and manipulating it from anywhere in your app, makes the app unpredictable and hard to manage, especially as it grows.
    - - props and state are CORE concepts of React. Actually, only changes in props and/ or state trigger React to re-render your components and potentially update the DOM in the browser
        
        props: allow you to pass data from a parent (wrapping) component to a child (embedded) component.
        
        state: Whilst props allow you to pass data down the component tree (and hence trigger an UI update), state is used to change the component, well, state from within. Changes to state also trigger an UI update.
        
        props.children: you can pass anything between a component, <Comp>...</Comp> and access it via props.children inside the Comp component.
    - - You can find a list of supported events here
    - - There are two ways to call a function on event handling:
        
        this.method.bind(this,arg) this is more efficient
        
        () => this.method(arg) this is more modern
    - - If you are displaying and changing the state of a component through one of it's child component (passing state as well as changestate through the props) then it is called two-way binding.
        
        for eg <input type="text" onChange={props.change} value={props.value}/> Here you're giving the value to the input as well as passing reference of a method which changes the value.
    - - We can also import .css file which is taken care by Webpack(build tool)
        
        It automatically add everything inside .css file inside the <style> tag in the output HTML file.
  - - - this.state.list.map(element => {
        
        return anyJSXelement
        
        })
    - - pass props =>
        
        delete = {()=>this.deleteHandler(index)}
        
        deleteHandler = index => {
        
        this.setState({list : [...this.state.list].splice(index,1)})
    - - {...
        
              <input onChange = { event => this.changeHandler(event,index)} />
        
        ...}
        
        .......
        
        inside the changeHandler function
        
        .......
        
        changeHandler = (event,index) =>{
        
              const el = {...this.state.list[index]}
        
              el.value = event.target.value
        
              ....
        
        }
    - - While rendering list, provide a key prop with something unique value(don't provide unique value which might change eg index of list -> every DB has a unique id)
  - - - radium
        
        styled-components
    - - With CSS modules, you can write normal CSS code and make sure, that it only applies to a given component.
        
        It'll simply automatically generate unique CSS class names for you.
        
        And by importing a JS object and assigning classes from there, you use these dynamically generated, unique names.
        
        So the imported JS object simply exposes some properties which hold the generated CSS class names as values
  - - - Inside /src folder create :-
        
        /assets folder :- contains all the assets needed for the project.
        
        /components folder :- contains all the stateless components.
        
        /containers folder :- contains all the statefull components.
        
        /hoc folder :- contains all the higher ordered components.
    - - Class-based components
        
        Creation
        
        constructor(props)
        
        Call super(props)
        
        DO : Set up State
        
        DON'T : Cause Side-Effects
        
        returns :- nothing
        
        static getDerivedStateFromProps(nextProps, prevState)
        
        DO : Sync State
        
        DON'T : Cause Side-Effects
        
        returns :- state
        
        render()
        
        Prepare and Structure your JSX code
        
        returns :- JSX
        
        Render Child Components
        
        1 more item...
        
        Update
        
        static getDerivedStateFromProps(nextProps, prevState)
        
        DO : Sync State
        
        DON'T : Cause Side-Effects
        
        returns :- state
        
        shouldComponentUpdate(nextProps, nextState)
        
        DO : Decide whether to continue update process or not
        
        DON'T : Cause Side-Effects
        
        returns :- boolean, depending on whether to update or not. (default is bold)
        
        typically return ((nextProps.something != this.props.something)||(nextState.something != this.state.something))
        
        render()
        
        Prepare and Structure your JSX code
        
        returns :- JSX
        
        Update Child Components Props
        
        1 more item...
        
        if you are checking all of the props and only then you want to re-render the DOM, then instead of extending to Component, React also has PureComponent
        
        Unmounting
        
        componentWillUnmount()
      - Function-based components
        
        useEffect()
        
        componentDidMount() alternative
        useEffect(()=>{**code**},[])
        
        componentWillUnmount() alternative
        useEffect(()=>{code
        return ()=>{excuted while unmounting}},[])
        
        shouldComponentUpdate() alternative:-
        use React.memo() to wrap the functional component while exporting
    - - Rendering Adjacent JSX Elements
        
        You can create a wrapper component, which only return its child
        
        const aux = props => props.children
        
        You can also use React.Fragment while using React 16 or above.
        
        just wrap the JSX component with <React.Fragment> component.
        
        You can directly return array of JSX elements.
      - Wrapping classes and props
        
        import React from 'react';
        
        const WithClass = (WrappedComponent, className) => {
        
            return props => (
        
                <div className={className}>
        
                    <WrappedComponent {...props}/>
        
                </div>
        
            );
        
        };
        
        export default WithClass;
    - - if you're updating state with a value that is dependent on previous state then, there is more elegent way of setting state
        
        this.setState((prevState,prevProps)=> {return newStateObject})
    - - If you want to restrict on datatypes on specific props, we can use propTypes. It will warn you in the console, while development and it is very much recommended to use specially while working in large team
    - - We can use ref to any component, and then control it:
        
        in class component, we can use createRef().
        
        So in the constructor we can use:- this.anyName = React.createRef();
        
        inside the component you'll write:- ref = {(inputEl)=>{this.anyName=inputEl}}
        
        or in the functional component, we can use useRef().
        
        initiate it like:- const anyRef = useRef(null).
        
        inside the component you'll write:- ref={anyRef}
    - - Context provides a way to pass data through the component tree without having to pass props down manually at every level.
        
        Creating context
        const AnyContext = React.createContext(default_context_object)
        
        Providing Context
        
        use Provider wrapper
        
        <AuthContext.Provider value = {custom_context_object}>
        
        {all the child components, you want to let them subscribe to this context}
        
        </AuthContext.Provider>
        
        Consuming Context
        
        inside render() function
        
        use Consumer wrapper which takes function as a child with context object as an argument
        
        <AuthContext.Consumer>
        
        {(context) =>{ use the context anywhere you want and return a JSX element}}
        
        </AuthContext.Consumer>
        
        inside component
        
        in class-based component, you can call the context by declaring static contextType = AuthContext; and use it using this.context anywhere you want.
        
        in functional component, you can call the context by declaring const authContext = useContext(AuthContext) and use it using authContext anywhere you want.
  - - - Install Axios by using command :- npm install axios --save
        
        For dummy data use JSONPlaceholder
    - - The best place for HTTP request in React as discussed before is componentDidMount() and componentDidUpdate()
        
        The next suitable place is event triggered function, ie after the component has finished all its hooks. eg. if you click post method => onClick shall trigger axios call
        
        To get the data we can use get() function of axios, as code below : axios.get(url).then().
        
        Don't store it in some variable as it's an async task. For example: dont do this- const req_1 = axios.get(url).then()
    - - After using get() method we can further use then() method to further use the response
        
        As axios is async task, setState should be put inside the then block
        
        Don't forget to add the key prop while rendering to the list
    - - After you get the data from response.data and you want to add one more property to each of the object we can do that by :-
        
        const post = response.data.map(post => {
        
        return { ...post,
        
        `author : 'Deep'`
        
        }})
    - - While fetching data on update we'll call axios.get() inside componentDidUpdate()
        
        This most important thing to keep in mind is that not to use setState() directly, instead use it conditionally. Otherwise it'll lead to infinite loop.
    - - axios.post(url,json_object) is used for posting an object.
    - - axios.delete(url) is used delete a data.
    - - After the then() method, we can further use catch(error => {}) method to handle any error.
    - - We can add interceptor in most global component to handle error or sending authorization header. There are 2 types of interceptors :-
        
        Request interceptors : This handles request and its error (eg. no Internet). axios.interceptors.request.use( request => {...., return request}, error => {...., return Promise.reject(error)})
        
        Response interceptors : This handles response and its error (eg. 204, 503, etc). axios.interceptors.response.use( response => {...., return response}, error => {...., return Promise.reject(error)})
        
        We can also remove interceptors by simply storing the reference to the interceptor in a variable and call eject with that reference as an argument, to remove it. click here
        
        var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
        
        axios.interceptors.request.eject(myInterceptor);
    - - Similar to interceptors, we can also set a default configuration globally by setting axios.default values.for eg axios.defaults.baseURL, axios.default.common['...'] = '...', axios.default.post['...'] = '...', and so on
    - - If somehow, you don't want to use global axios configuration, instead, you want to use custom axios intances, you can create on your own, and export it, to use it wherever you want
        
        const instance = axios.create({baseURL : .....})
        
        instance.interceptors.request.use(request=>{...,return request;},error => {...,return Promise.reject(error)})
        
        `export default instance'
  - - - Install react-router-dom using the following command: npm install --save react-router-dom
        
        Routing is just rendering different component with respect to different routing url.
        
        Wrap the root component with <BrowserRouter/> to enable Routing.
    - - path :- it defines the path at which it needs to render
        
        for example path="/post"
      - exact :- it restricts to render the route only if the path is exactly the same. If not mentioned, exact will route it even if the path is substring of current path.
        
        for example path="/post" exact will route also if the url is /post12 or /post123
      - render :- it takes a function which returns any jsx code that it needs to render at that routes path.
        
        for example render={()=><h1>Hello</h1>}
      - component :- unlike render, it directly takes a jsx component to render at that routes path.
        
        for example component={<Posts/>}
      - <Route/> is a component which will render conditionally depending on the url
        
        Take below codes as a reference to examples below
        
        <Route path="/" exact render={() => <h1>Home</h1>}/>
        
        <Route path="/" exact component={Posts}/>
      - <Route ...component={Post}/>, will always send 3 additional props to the component:
        
        history :- This has some methods. For eg. push() method to push a page programatically without having to click a <Link/> component.
        
        location :- This is gives us the location. for eg. hash, key, pathname, search, state.
        
        match :- This gives us some information about the matched route. for eg. isExact, path, url, and params
    - - The problem with <a> (Anchor Tag) is that clicking it will route to referred page, but it reloads the whole dom as well. This leads to remounting of components which further leads to state reallocation which you might not want.
        
        <Link/> component:- It is similar to anchor tag, but it prevents page reload unlike the <a/> tag
        
        Take below codes as a reference to examples below.
        
        <Link to="/"/>
        
        <Link to={{
        
        pathname: 'new-post',
        
        hash: '#submit'
        
        search: ''?quick-submit=true
        
        }}/>
      - The to property of <Link/> tag always refers to absolute path.
        
        If you want your link to have a relative path, append you path to this.props.match.url
        
        for eg to={this.props.match.url+"/relative_path"}
    - - As we know <Route/> also passes 3 props to the rendered component in addition to other props.
        
        If we want to access those 3 props other than the case of a <Route/> we can do that using withRouter() wrapper.
        
        Just export your component by wrapping it with withRouter(), then you can use those 3 objects.
    - - The problem with <Link/> tag is, we can't add any style or className to it, and only because under the hood <Link/> tag is just <a/> tag, we can set style to <a/> tag.
        
        To solve this we have <NavLink/> tag. This comes with two properties:-
        
        activeClassName:- we can pass a style object which would only work if the url and the NavLink pathname is same. Also to avoid substring problem, we can add exact keyword to it. (by default Navlink passes .active className to the active link)
        
        activeStyle:- this is similar to activeClassName but deals with the inline style
        
        Edge Case
        
        Lets say, you have 2 NavLinks : posts with url '/' and new posts with url '/new-posts'
        
        both have activeStyles (refer here).
        
        To avoid the active styling on posts link while on url '/new-posts' we need to specify exact props to it.
        
        Now, if posts have array of post components, and route to any post with url `/:id, because of that exact keyword, both posts and new posts will lose the active styles.
        
        This could be solved if there was something similar to <Switch/> component even for NavLinks.
    - - match.params
        
        Passing
        
        If the path of <Route/> component contains colon ':' in it (for eg <Route path="/:id"/>), it is then stored inside match.params object as a key value pair which is then passed as a props to the Routed Component.
        
        <Route path="/:id" component={Post}/>:- Here the Post component will be routed whenever the url is anything concatinated with /.
        
        Extracting
        
        Inside the Routed component, we can acces this param, using props.match.params.
        
        For eg, <Route path="/:id" component={Post}/>, on browsing to url: localhost:3000/12, will render <Post/> component with match.params having object as {id : "12"}
      - location.search
        
        Passing
        
        Query Params
        
        You can pass them like this:-
        
        <Link to="/my-path?start=5">Go to Start</Link>
        
        <Link to={‌{pathname: '/my-path', search: '?start=5'}}>Go to Start</Link>
        
        Extracting
        
        React router makes it easy to get access to the search string: props.location.search. But that will only give you something like ?start=5
        
        You probably want to get the key-value pair, without the ? and the =, here is the snippet:-
        
        componentDidMount() {
        
              const query = new URLSearchParams(this.props.location.search);
        
              for (let param of query.entries()) {
        
                    console.log(param); // yields ['start', '5']
        
              }
        
        }
        
        URLSearchParams is a built-in object, shipping with vanilla JavaScript. It returns an object, which exposes the entries() method. entries() returns an Iterator - basically a construct which can be used in a for...of... loop (as shown above).
      - location.hash
        
        Passing
        
        Query Params
        
        You can pass them like this:-
        
        <Link to="/my-path#start-position">Go to Start</Link>
        
        <Link to={‌{pathname: '/my-path', hash: 'start-position'}}>Go to Start</Link>
        
        Extracting
        
        React router makes it easy to extract the fragment. You can simply access props.location.hash
    - - If you have multiple <Route/> components and want to route, only one of them as per matched path, we can wrap all these routes with <Switch/> component.
        
        <Switch/> component will match the url to the paths of the route and only the first matched path will be routed. So set correct hierarchy to avoid problem
    - - history parameter
        
        Using history.push() props alternative to Link
        
        Sometimes, directly changing the url after clicking <Link/> is not suitable. We want to execute some program and then only change the url.
        
        This is where history.push(url,state) comes to play. onClick function should run some program and in the end just execute this line to take us to the needed url.
        
        For Eg. <Button onClick={()=>this.clicked(id)>Click Here</Button>
        
        clicked = id => { some codes......; this.props.history.push('/'+id)}
        
        Read more about history
        
        (Read it after Redirect topic)
        Using history.replace() props for Redirecting
        
        `history.replace(path, state): There is and alternative to <Redirect/>. The below code:
        
        this.setState({isSubmitted: true})
        
        {this.state.isSubmitted ? <Redirect to="/posts"/> : null }
        
        could be replaced by:
        
        this.props.history.replace('/posts')
        
        Using <Redirect/> or history.replace() just changes the current path to different path. It doesn't add new state to the stack of history, ie., after redirecting or replace, if you press the back button you won't be able to go to immediate previous state, as it got replaced to redirected or replaced state.
        
        You can use history.push() instead. So, it will push the new url route instead of replacing it.
    - - Things to Remember
        
        If you're using Nested <Route/>, don't define exact prop to any Parent <Route/>.
        
        Doing this you won't be able to render the Child Route (lets say, url is '/posts/123') because the Parent Route(lets say, url is '/posts') will be unmounted, as it has exact props in it.
        
        Prefer to append ${this.props.match.url} to any path to the path of Child Route, especially when using Nested Route, as it will help in future team work.
      - Creating Dynamic Nested Routes
        
        If you're re-rendering same <Route/> component again, but the match.params has changed, and you want to do setState() (rerendering new data) directly, or using axios call, then in addition to componentDidMount(), you'll also need to describe componentDidUpdate().
        
        Also be carefull about conditional checks in componentDidUpdate() and prevent infinite loops.
    - - If you want to redirect a path to different path, you can do that using <Redirect/> component.
        
        For eg., <Redirect from="/" to="/posts"/> will redirect the url from "/" to "posts".
      - Conditional Redirects
        
        If we want to Redirect conditionally:- Imagine we want to create new post using <NewPost/> component routed in '/new-post' url:
        
        So after the post is submitted, we want to call api through axios, and only if the response come, we want to redirect back to '/posts' url rendering <Posts/> component.
        
        This could be done conditionally, in the <NewPost/> component, set some submitted flag state (eg isSubmittedState to true) , and only when this is true then only redirect back to po
    - - If you want to conditionally render a <Route/> component depending on some state (say auth state), you can conditionally use it.
        
        For eg {this.state.auth ? <Route path="xyz" componen={Post}/> : null}
        
        In case you don't want to check the condition in the parent, you can also go inside the child component and use history.replace() (or even use <Redirect/>)
        
        For eg. inside the <Post/> component, you can write the below code inside the componentDidMount() method.
        
        if(this.state.auth === false) this.props.history.replace('/')
    - - If you don't set any path inside <Route/> component, then it'll always render its component, irrespective of it's path.
        
        So you could takes it's advantage :-
        
        If you want to render Error Page or Not Logged-In Page, then inside <Switch/> component, you can render <Route/> component with no path, In the End
        
        This way, it'll route any unmatched url to this component.
        
        Keep in mind that you can use, either of the below component, and not both together:-
        
        <Route component={ErrorPage}/>, which will render ErrorPage component.
        
        <Redirect from="/" to="/home"/>, which will redirect to /home route.
    - - Prior to React 16
        
        Create a hoc component
        
        import React,{Component} from 'react';
        
        const asyncComponent = (importComponent) => {
        
            return class extends Component {
        
                state = {
        
                    component: null
        
                }
        
                componentDidMount() {
        
                    importComponent()
        
                        .then(cmp => {
        
                            this.setState({component: cmp.default});
        
                        })
        
                }
        
                render() {
        
                    const C = this.state.component;
        
                    return C ? <C {...this.props} /> : null;
        
                }
        
            }
        
        }
        
        export default asyncComponent;
        
        usage
        
        To use it just import it.
        
        import asyncComponent from 'hocLocation';
        
        Import the component you want to split through this hoc function:-
        
        Just pass a function which imports the component you want to render:-
        
        const AsyncHome = asyncComponent(()=> import('HomeComponentLocation));
        
        And then use it wherever you want :-
        
        <Route path="/" component={AsyncHome}/>
      - React 16 and later
        
        To import use lazy() function
        
        import any component through lazy function. (don't forget to import lazy and Suspense from react)
        
        const Home = lazy(() => import('HomeLocation'));
        To use, also import Suspense component
        
        <Route path="/home" render={()=><Suspense fallback={<div>loading...</div>>}>
        
        <Home/>
        
        </Suspense>}/>
  - - - Install redux using the following command: npm install --save redux
        
        Install react-redux using the following command: npm install --save react-redux
        
        Install redux-thunk using the following command: npm install --save redux-thunk
        
        Useful Resources:-
        
        Redux Docs
        
        Core Concepts
    - - Redux has a method called createStore() which takes reducer as an argument, and returns a reference to an object.
        
        use createStore() inside the index.js file or any global file.
        
        reducer is a method which takes 2 arguments : state and action and returns a new_state.
        
        state is the actual data that is located in the store and which would be replaced by the returned object. (keep in mind to not mutate the existing state, rather return new state.)
        
        action is passed on by the dispatch function which is called at the time of manipulation. It must contain type and may also contain payload.
        
        type is a string which mentions a reducer on what logic to execute.
        
        payload is an object/value which reducer may need while executing logic.
        
        Also, reducer must not have any async task.
        
        createStore() returns a reference to an object containing 5 functions:-
        
        dispatch: It's a function that passes an action object to the reducer which further updates the store.
        
        keep in mind, dispatching unknown type doesn't throw an error.
        
        subscribe: It contains a method which is executed whenever the store gets executed.
        
        getState: It returns the state in the store.
        
        replaceReducer:
        
        [Symbol(observable)]:
    - - as we know the best place to create new store is index.js because that's the place where we wrap the <App/> component with <Provider/> component.
        
        This is done so because doing so, only will let all the component to be able to dispatch or subscribe to the store.
        
        For this, obviously there is a store prop in the <Provider/> component which takes the redux store.
        
        Use it like this:-
        
        Definition
        
        const store = createStore(reducer)
        
        Implementation
        
        <Provider store={store}/>
        
        <App/>
        
        </Provider>
    - - connect() is a function which returns a hoc in which we pass the component we want to give acess for dispatch/subscribe methods.
        
        It takes (at most) 2 arguments:
        
        subscription:- as react-redux connect react with redux, it doesn't subscribe directly, but just map the redux state(or chunk of it) to the react component prop.
        
        const mapStateToProps = state => {
        
            return {
        
                ctr : state.counter
        
            }
        
        }
        
        dispatch:- similar to above procedure:-
        
        const mapDispatchToProps = dispatch => {
        
            return {
        
                onIncrementCounter: () => dispatch({type: 'INCREMENT'})
        
            }
        
        }
        
        It is then passed to connect() function like this :- connect(mapStateToProps,mapDispatchToProps), which is further used by any component as a hoc.
    - - few things to keep in mind
        
        while dealing with arrays and objects, don't do shallow cloning.
        
        try to keep the state as flat as possible
    - - Connecting reducer with dispatch using action.type can be very error-prone.
        
        To overcome this, create one more file (usually named actions.js) which contains all the action.type as constants.
        
        You can import it in the reducer as well as dispatch and use those constants to keep in sync between all of these different places
    - - If you want to use multiple reducers, redux has a function called combineReducers().
        
        It takes an object as an argument, with key value pair with value being the imported reducers, and key is used in the subscribe method.
        
        Few things to keep in mind:-
        
        subscribe :- while defining mapStateToProps, you have to go further down to state.substate while accessing the state. Here substate will be the key defined inside combineReducers ie state.key.
        
        To pass values from one reducer to other, one needs to pass through action.payload only
    - - Types of State
        
        Local UI State - For eg., Show/Hide Backdrop
        
        Mostly handled within component
        
        Persistence State - For eg., All Users, All Posts, etc
        
        Stored on Server, relevent slice managed by Redux
        
        Client State - For eg., Is Authenticated?, Filter set by user, .etc...
        
        Managed via Redux
    - - applyMiddleware() function
        
        Before the action reaches to reducer from dispatch, you can apply a middleware.
        
        redux has a method called `applyMiddleware() method which takes one argument:-
        
        The argument takes a function which takes store as input and returns a function, which further takes a next() function(similar to dispatch()) as an input and returns a function, which further takes action as input and returns a result(action object).
        
        const func = store => {
        
            return next => {
        
                return action => {
        
                    ...preNextLogics...
        
                    const result = next(action);
        
                    ...postNextLogics...
        
                    return result
        
                }
        
            }
        
        }
        
        Just inject it in createStore() method:-
        
        const store = createStore(reducer, applyMiddleware(func))
        
        also include Redux Devtool
        
        using middleware:-
        
        const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
        
        don't forget to import compose from 'redux'
        
        inside createStore() define it in the second argument, wrapping the middleware.
      - Handling Asynchronous Code
        
        This is done by redux-thunk.
        
        Inside actions file there are two different types of actions:-
        
        actionTypes:- contains all the action.type constants.
        
        This will be used by the reducer while comparing with the action.type
        
        Also, it'll be used by actionCreator function.
        
        actionCreators:- contains all the methods which returns two probable things:-
        
        In case of sync dispatch method, it simply returns an action object
        
        Incase of async dispatch method, it returns a method which takes dispatch, and getState as arguments, and then dispatch the sync method.
        
        don't overuse the getState method though. prefer passing it through the component
        
        (dispatch, getState) => {... dispatch(getAction(res))...}
        
        If there are more than one actionCreators, then you can create index.js file, which exports all the methods, and could be used somewhere else.
      - Redux file structure
        
        store: contains all folders needed for redux.
        
        actions
        
        actionTypes
        
        actionsCreators
        
        index
        
        reducers
        
        reducer
      - ActionCreator vs Reducer
        
        Where to put the Logic
        
        ActionCreator are just meant to create the actions before dispatching it to the reducers.
        
        ActionCreator can do all the async task jobs
        
        Reducers are the one where you put the actual logics which then returns the updated states to the store.
        
        Reducers can't do async task, it just runs sync codes.
        
        If you've async codes, run it inside actionCreators whereas, in case of sync codes, run it inside reducers.
      - Useful Resources:-
        
        Middleware
        
        redux-thunk package
        
        Async Actions