Redux in Vanila Javascript

asyncActions.js

const redux = require("redux");
const applyMiddleware = redux.applyMiddleware;
const createStore = redux.createStore;
const thunkMiddleware = require("redux-thunk").default;
const axios = require("axios");

const initialState = {
  loading: false,
  users: [],
  error: "",
};

const FETCH_USERS_REQUEST = "FETCH_USERS_REQUEST";
const FETCH_USERS_SUCCESS = "FETCH_USERS_SUCCESS";
const FETCH_USERS_FAILURE = "FETCH_USERS_FAILURE";

const fetchUserRequest = () => {
  return {
    type: FETCH_USERS_REQUEST,
  };
};

const fetchUserFailure = (error) => {
  return {
    type: FETCH_USERS_FAILURE,
    payload: error,
  };
};

const fetchUserSuccess = (users) => {
  return {
    type: FETCH_USERS_SUCCESS,
    payload: users,
  };
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_USERS_REQUEST:
      return { ...state, loading: true };
    case FETCH_USERS_SUCCESS:
      return { loading: false, users: action.payload, error: "" };
    case FETCH_USERS_FAILURE:
      return { loading: false, users: [], error: action.payload };
    default:
      return state;
  }
};

const fetchUsers = () => {
  return async function (dispatch) {
    dispatch(fetchUserRequest());
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        const users = response.data;
        console.log(users);
        dispatch(fetchUserSuccess(users));
      })
      .catch((error) => {
        dispatch(fetchUserFailure(error.message));
      });
  };
};

const store = createStore(reducer, applyMiddleware(thunkMiddleware));
store.subscribe(() => console.log(store.getState()));
store.dispatch(fetchUsers())

combinedReducer.js

const redux = require("redux")


const createStore = redux.createStore
const combinedReducer = redux.combineReducers

const BUY_CAKE = "BUY_CAKE";
const BUY_ICE_CREAM = "BUY_ICE_CREAM";

function buyCake() {
  return {
    type: BUY_CAKE,
    info: "First Redux action",
  };
}

function buyIceCream() {
    return {
      type: BUY_ICE_CREAM,
      info: "First Redux action",
    };
  }





// const initialState = {
//     numOfCakes: 10,
//     numOfIceCreams: 20,
// }


// const reducer = (state=initialState, action)=>{
//     switch(action.type){
//         case BUY_CAKE: return {
//             ...state,
//             numOfCakes: state.numOfCakes-1
//         }
//         case BUY_ICE_CREAM: return {
//             ...state,
//             numOfIceCreams: state.numOfIceCreams-1
//         }
//         default: return state
//     }
// }


// const store = createStore(reducer)
// console.log("Initial Store", store.getState())
// const unsubscribe = store.subscribe(()=>console.log("Updated Store", store.getState()))

// store.dispatch(buyCake())
// store.dispatch(buyIceCream())
// store.dispatch(buyCake())
// store.dispatch(buyIceCream())
// store.dispatch(buyCake())
// unsubscribe()


const initialCakeState = {
    numOfCakes: 10,
}

const initialIceCreamState = {
    numOfIceCreams: 20,
}


const cakeReducer = (state=initialCakeState, action)=>{
    switch(action.type){
        case BUY_CAKE: return {
            ...state,
            numOfCakes: state.numOfCakes-1
        }
        default: return state
    }
}
const iceCreamReducer = (state=initialIceCreamState, action)=>{
    switch(action.type){
        case BUY_ICE_CREAM: return {
            ...state,
            numOfIceCreams: state.numOfIceCreams-1
        }
        default: return state
    }
}


const rootReducer = combinedReducer({
    cake: cakeReducer,
    iceCream: iceCreamReducer
})

const store = createStore(rootReducer)


console.log("Initial Store", store.getState())
const unsubscribe = store.subscribe(()=>console.log("Updated Store", store.getState()))

store.dispatch(buyCake())
store.dispatch(buyIceCream())
store.dispatch(buyCake())
store.dispatch(buyIceCream())
store.dispatch(buyCake())
unsubscribe()

index.js

const redux = require("redux")


const createStore = redux.createStore

const BUY_CAKE = "BUY_CAKE";

function buyCake() {
  return {
    type: BUY_CAKE,
    info: "First Redux action",
  };
}


const initialState = {
    numOfCakes: 10
}

const reducer = (state=initialState, action)=>{
    switch(action.type){
        case BUY_CAKE: return {
            ...state,
            numOfCakes: state.numOfCakes-1
        }
        default: return state
    }
}


const store = createStore(reducer)
console.log("Initial Store", store.getState())
const unsubscribe = store.subscribe(()=>console.log("Updated Store", store.getState()))

store.dispatch(buyCake())
store.dispatch(buyCake())
store.dispatch(buyCake())
unsubscribe()

package.json

{
  "name": "redux-vanila-javascript",
  "version": "1.0.0",
  "description": "Redux Valina Javascript",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  
  "keywords": [],
  "author": "",
  "license": "ISC",
"dependencies": {
    "redux": "^4.2.0"
  }
}