Currency Converter App using Redux (2025)

In this updated version, we use Redux Toolkit to manage API rates and selected currency state centrally. This is more scalable and ideal for large applications.

⚙️ Tools Used

• React 18+
• Redux Toolkit
• Tailwind CSS
• ExchangeRate API

📦 Redux Store Setup

// src/redux/store.js
import { configureStore } from "@reduxjs/toolkit";
import currencyReducer from "./currencySlice";

export const store = configureStore({
  reducer: {
    currency: currencyReducer
  }
});
    

📁 Currency Slice

// src/redux/currencySlice.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

export const fetchRates = createAsyncThunk("currency/fetchRates", async () => {
  const res = await fetch("https://api.exchangerate.host/latest");
  return await res.json();
});

const currencySlice = createSlice({
  name: "currency",
  initialState: {
    rates: {},
    loading: false,
    error: null
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchRates.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchRates.fulfilled, (state, action) => {
        state.loading = false;
        state.rates = action.payload.rates;
      })
      .addCase(fetchRates.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  }
});

export default currencySlice.reducer;
    

💻 Main App Component

// src/App.jsx
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchRates } from "./redux/currencySlice";

const App = () => {
  const dispatch = useDispatch();
  const { rates } = useSelector((state) => state.currency);

  const [amount, setAmount] = useState(1);
  const [from, setFrom] = useState("USD");
  const [to, setTo] = useState("INR");
  const [converted, setConverted] = useState(null);

  useEffect(() => {
    dispatch(fetchRates());
  }, [dispatch]);

  useEffect(() => {
    if (rates && from && to) {
      const result = (amount * rates[to]) / rates[from];
      setConverted(result.toFixed(2));
    }
  }, [rates, from, to, amount]);

  const options = Object.keys(rates);

  return (
    

      
Currency Converter

      

        Amount:
         setAmount(e.target.value)} className="w-full p-2 border rounded"/>
      

      

        From Currency:
         setFrom(e.target.value)} className="w-full p-2 border rounded">
          {options.map((opt) => (
            {opt}
          ))}
        
      

      

        To Currency:
         setTo(e.target.value)} className="w-full p-2 border rounded">
          {options.map((opt) => (
            {opt}
          ))}
        
      

      

        Converted: {converted ? `${converted} ${to}` : "Loading..."}
      
    
  );
};

export default App;
    

📦 Connect Redux to React

// src/main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./redux/store";

ReactDOM.createRoot(document.getElementById("root")).render(
  
    
  
);