Latihan Redux

//File dataSlice.jsx (Redux)

import { createSlice } from '@reduxjs/toolkit';

const initialState = [];

export const dataSlice = createSlice({
  name: 'data',
  initialState,
  reducers: {
    saveToLocal: (state) => {
      localStorage.setItem('data', JSON.stringify(state));
    },
    getFromLocal: (state) => {
      const localData = JSON.parse(localStorage.getItem('data'));
      if (localData) {
        return localData;
      }
      return state;
    },
  },
});

export const { saveToLocal, getFromLocal, addData } = dataSlice.actions;

export default dataSlice.reducer;


//File input.jsx

const handleSubmit = async () => {
    const uri = encodeURIComponent(inputValue.toString());
    const url = "https://cleanuri.com";
    const shortenAPI = `${url}/api/v1/shorten`;
    if(uri!==""){
      try {
        const res = await fetch(shortenAPI, {
          method: "POST",
          body: `url=${uri}`,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        });
  
        if (!res.ok) {
          throw new Error(`HTTP error! status: ${res.status}`);
        }
  
        const dataJSON = await res.json();
        console.log(dataJSON)
        if(dataJSON?.result_url){
          const newData = { url: inputValue, shortLink: dataJSON.result_url };
          setData([...data, newData]);
          console.log(newData);
          // localStorage.setItem('data', JSON.stringify([newData]))
          dispatch(saveToLocal(newData))
          setInputValue("");
        }
        
      } catch (error) {
        console.error("Fetch error:", error);
      }
    }
    else{
      setAlertInput(!alertInput)
    }
  };