How to stop sen request to fetch data if it does not changed ? redux saga

Question

hello guys could u help me please, im just learning redux redux-saga and every time I want to access a component, it sends a request to the server. How can I avoid this? I want it to check if the data has changed, and if it has, then make a request; otherwise, it should not make a request.

this is my saga

import { takeEvery, put, call, take, all, select } from "@redux-saga/core/effects";
import { ActionTypes } from "../constants";
import {
  ApiBoardResponse,
  ApiAllBoardsResponse,
  getAllBoards,
  getBoard,
} from "../../api/board";
import {
  allBoardsError,
  allBoardsLoaded,
  boardLoaded,
  boardError,
} from "../actions/actionCreate";

import { AxiosResponse } from "axios";
import { DataBoard } from "../../api/board/types";
import { RootState } from "../reducers";

export function* workerGetBoard(action: any) {
  try {
    console.log("BOARD FETCH REQUEST");
    const boardId = action.payload;
    const response: AxiosResponse<ApiBoardResponse> = yield call(
      getBoard,
      boardId
    );
    yield put(boardLoaded(response.data.data));
  } catch (error) {
    yield put(boardError(error));
  }
}

export function* workerGetAllBoards() {
  try {
    console.log("ALL BOARDS FETCH REQUEST");
    const state:DataBoard[] = yield select((store:RootState) => store.allBoardsReducer);
    console.log(state, "allBoards")
    const response: AxiosResponse<ApiAllBoardsResponse> = yield call(
      getAllBoards
    );
    yield put(allBoardsLoaded(response.data.data));
  } catch (error) {
    yield put(allBoardsError(error));
  }
}


export function* watcherSaga1() {
  yield takeEvery(ActionTypes.FETCH_BOARDS_REQUEST, workerGetAllBoards);

}
export function* watcherSaga2() {

  yield takeEvery(ActionTypes.FETCH_BOARD_DATA_REQUEST, workerGetBoard);
}

export default function* rootSaga(): Generator {
    yield all([
        watcherSaga1(),
        watcherSaga2(),
        
      ]);
}

this is reducer

import { ActionTypes } from "../constants";
import { DataBoard } from "../../api/board/types";

type Action = {
  type: string;
  payload: DataBoard[];
};

const INITIAL_STATE = {
  data: [],
  loading: false,
  error: null,
};

const allBoardsReducer = (state = INITIAL_STATE, action: Action) => {
  switch (action.type) {
    case ActionTypes.FETCH_BOARDS_REQUEST:
      return {
        ...state,
        loading: true,
        error: null,
      };
    case ActionTypes.FETCH_BOARDS_SUCCESS:
      return {
        ...state,
        loading: false,
        data: action.payload,
      };
    case ActionTypes.FETCH_BOARDS_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload,
      };
    default:
      return state;
  }
};

export default allBoardsReducer;

this is action types

export const allBoardsRequest = () => ({
  type: ActionTypes.FETCH_BOARDS_REQUEST,
});
export const allBoardsLoaded = (data: DataBoard[]) => ({
  type: ActionTypes.FETCH_BOARDS_SUCCESS,
  payload: data,
});

export const allBoardsError = (error: any) => ({
  type: ActionTypes.FETCH_BOARDS_FAILURE,
  payload: error.message,
});

and this is my component

import React, {useEffect, memo} from "react";
import { useSelector, useDispatch } from "react-redux";
import {allBoardsRequest} from "../redux/actions/actionCreate"
import {RootState} from "../redux/reducers/index"

export default function Board() {
  
const data = useSelector((store:RootState)=>store.allBoardsReducer) 
const dispatch=useDispatch()
console.log(data)

useEffect(()=>{
 dispatch(allBoardsRequest())

},[])


  return (
    <div className="container1" >


      
    </div>
  );
}

i can check inside the worker saaga does the data the same or not if so then make request however i dont think its good practice, shoudl i write code of mapping or filterind inside saga worker? or its not good idea? or maybe i have to do something in reducer?