Build a Live Currency Converter App using Redux Toolkit 2025

✅ Features:

• Convert from one currency to another
• Fetch live exchange rates using an API
• Use Redux Toolkit for global state management

📁 Folder Structure

src/
├── app/
│   └── store.js
├── features/
│   └── currency/
│       ├── currencySlice.js
│       └── CurrencyConverter.js
├── App.js
└── index.js
    

1️⃣ Install Packages

npm install @reduxjs/toolkit react-redux axios
    

2️⃣ Setup Redux Store (📄 src/app/store.js)

import { configureStore } from '@reduxjs/toolkit'
import currencyReducer from '../features/currency/currencySlice'

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

3️⃣ Create Currency Slice (📄 currencySlice.js)

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import axios from 'axios'

const initialState = {
  rates: {},
  status: 'idle',
  error: null
}

export const fetchRates = createAsyncThunk(
  'currency/fetchRates',
  async () => {
    const response = await axios.get('https://api.exchangerate-api.com/v4/latest/USD')
    return response.data.rates
  }
)

const currencySlice = createSlice({
  name: 'currency',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchRates.pending, (state) => {
        state.status = 'loading'
      })
      .addCase(fetchRates.fulfilled, (state, action) => {
        state.status = 'succeeded'
        state.rates = action.payload
      })
      .addCase(fetchRates.rejected, (state, action) => {
        state.status = 'failed'
        state.error = action.error.message
      })
  }
})

export default currencySlice.reducer
    

4️⃣ CurrencyConverter.js Component

import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { fetchRates } from './currencySlice'

const CurrencyConverter = () => {
  const dispatch = useDispatch()
  const rates = useSelector(state => state.currency.rates)
  const status = useSelector(state => state.currency.status)
  const [amount, setAmount] = useState(1)
  const [from, setFrom] = useState('USD')
  const [to, setTo] = useState('INR')
  const [result, setResult] = useState(null)

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

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

  const currencyOptions = Object.keys(rates)

  return (
    

      
💱 Currency Converter

      

         setAmount(e.target.value)}
        />

        

           setFrom(e.target.value)}>
            {currencyOptions.map((cur) => (
              {cur}
            ))}
          

           setTo(e.target.value)}>
            {currencyOptions.map((cur) => (
              {cur}
            ))}
          
        
      

      {status === 'loading' && 
Loading rates...
}
      {result && (
        

          {amount} {from} = {result} {to}
        
      )}
    
  )
}

export default CurrencyConverter
    

5️⃣ App.js

import CurrencyConverter from './features/currency/CurrencyConverter'

function App() {
  return (
    

      
    
  )
}

export default App
    

6️⃣ index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { Provider } from 'react-redux'
import { store } from './app/store'
import './index.css'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  
    
  
)
    

📌 API Used:

https://api.exchangerate-api.com/v4/latest/USD