Redux Basic Configuration and folder & files Mid.

Hi fellas , in this text I'll explain the basic redux files and folders admin this files are completely able to be save in to another folder, if you have a big app or if you're building a big one also this is a nob to mid level text so you'll need to learn the basics cause if not maybe you gonna mix the knowledge and it will be hard and frustrating but let's move on

first of all the extensions we'll gonna use on this:

npx create-react-app
npm i react-router-dom@6 install the router v6 dependency
npm i redux
npm i react-redux
npm i redux-devtools-extension
npm i redux-thunk

once he have a the npx complete and the un-useful files were deleted we need to create a new folder
inside the src folder called store and the file called store.js

repeating the same process we'll need to build another folder and file called actions, reducers, store & types

this is the structure, we want to build

src
├───actions
|      └ actions.js
├───reducers
|      └ reducer.js      
├───store
|      └ store.js
└───types
|     └ types.js
└───App.js
└───index.js

next we gonna type code and start to save the types as you've the redux use a switch to manage the actions in order to get, update, create or delete the properties on the stored object without mutate it out so instead we have all the logic on the same function let's split out

export const types = {

  authLogin: '[auth] auth login',

}

once we've built it out the next step is open the store.js and just to get in deeper this store will be the truth of all the info we gonna manage on the app

concepts: like the name explain is the storage of the info that we want to manage let's gonna think as a bag of objects were gonna be on it and after we gonna request and dispatch

import { createStore, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";

import { rootReducer  } from "../reducers/rootReducers";

const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;

export const store = createStore(
    rootReducer,
    composeEnhancers(
        applyMiddleware(thunk)
    )
)