redux-language-mymemory/languageSlice.js

Redux slice for language translation using the MyMemory API.

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

// Async thunk to translate text using MyMemory API
export const translateText = createAsyncThunk(
  'language/translateText',
  async ({ text, targetLang }) => {
    const response = await axios.get('https://api.mymemory.translated.net/get', {
      params: {
        q: text,
        langpair: `en|${targetLang}`,
      },
    });
    return response.data.responseData.translatedText;
  }
);

const languageSlice = createSlice({
  name: 'language',
  initialState: {
    language: 'en',
    translatedText: '',
    loading: false,
    error: null,
  },
  reducers: {
    setLanguage(state, action) {
      state.language = action.payload;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(translateText.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(translateText.fulfilled, (state, action) => {
        state.loading = false;
        state.translatedText = action.payload;
      })
      .addCase(translateText.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

export const { setLanguage } = languageSlice.actions;
export default languageSlice.reducer;