technology logo
technology logo

Simple redux toolkit

share link

by bilal4 dot icon Updated: Dec 7, 2022

Guide Kit Guide Kit  

import { applyMiddleware, createStore } from "redux";

import thunk from "redux-thunk";

import axios from "axios";

import { composeWithDevTools } from "redux-devtools-extension";


// action

export const fetchPost = () => {

  return async (dispatch, getState) => {

    dispatch({ type: "LOAD" });

    try {

      const respone = await axios.get(

        "https://jsonplaceholde.typicode.com/posts"

      );

      // console.log(respone.data);

      dispatch({

        type: "FETCH",

        payload: respone.data,

      });

    } catch (error) {

      console.log(error.message);

      dispatch({ type: "ERR", error });

    }

  };

};

// reducer

const initState = {

  data: [],

  load: false,

  error: null,

  err: false,

};

const postReducer = (state = initState, action) => {

  console.log(action.payload);

  switch (action.type) {

    case "LOAD": {

      return {

        ...state,

        load: true,

      };

    }

    case "FETCH": {

      return {

        ...state,

        load: false,

        data: action.payload,

      };

    }

    case "ERROR": {

      return {

        ...state,

        err: true,

        error: action.error,

      };

    }

    default: {

      return state;

    }

  }

  //    if (action.type === "LOAD") {

  //     return {

  //         ...state,

  //         load:true,


  //     };

  //   if (action.type === "FETCH") {

  //     return {

  //         ...state,

  //         load:false,

  //         data:action.payload

  //     };

  //   }

  //   return state;

};


export const store = createStore(

  postReducer,

  composeWithDevTools(applyMiddleware(thunk))

);