Question 237879 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Save function instead of value in React, RTK

How to save a function instead of a value in RTK so that i can save a function reference in a component and call it in another component in React?

I just want to reset timer from another component. I don’t know what to do so i made a state in react for that function reference

HOME COMPONENT

import React, { useEffect } from "react";
import { Outlet } from "react-router-dom";
import { useSelector,useDispatch } from "react-redux";
import Sidebar from "../components/Sidebar/Sidebar";
import { useIdleTimer } from "react-idle-timer";
import { userLogout } from "../utils/utils";
import LoadingAnimation from "../components/LoadingAnimation/LoadingAnimation";
import { setLogoutTimerReset } from "../store/slicers/logoutSlice";

const Home = () => {
    const { user } = useSelector((state) => state.auth);
    const dispatch = useDispatch();
    
    const onIdle = () => {
        userLogout();
    };

    const { reset } = useIdleTimer({
        onIdle,
        timeout: 60 * 30 * 1000, //60 minute idle timeout
        // timeout: 30000_000,
    });

    useEffect(() => {
        dispatch(setLogoutTimerReset(reset));

        return () => {};
    }, []);

    return user ? (
        <section className="home-sidebar-flex">
            <Sidebar />

            <main className="map-main-parent--container">
                <Outlet />
            </main>
        </section>
    ) : (
        <LoadingAnimation />
    );
};

export default Home;

SOME OTHER COMPONENT

import React from 'react'
import { useSelector } from "react-redux";

function App() {
  const { resetLogoutTimer } = useSelector((state) => state.logoutState);

  return (
    <div onClick={resetLogoutTimer}>Resetter</div>
  )
}

export default App

SLICE CODE

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

const initialState = {
    resetLogoutTimer: () => {},
};

export const logoutSlice = createSlice({
    name: "logout",
    initialState,
    reducers: {
        setLogoutTimerReset: (state, payload) => {
            state.resetLogoutTimer = payload;
        },
    },
});

export const {  setLogoutTimerReset } = logoutSlice.actions;

export default logoutSlice.reducer;

Reset idleTime from another component
I am using react-idle-timer

Tags:

2

Answers


  1. 0

    How to save a function instead of a value in RTK so that i can save a function reference in a component and call it in another component in React?

    Personally I wouldn’t recommend it since this is what for redux or context were created. You can move your logic there and just call it anywhere among your application.

    However if you really insist on keeping your solution, I believe you are missing the dispatch.

    const dispatch = useDispatch();

useEffect(() => {
    dispatch(setLogoutTimerReset(reset));

    return () => {};
}, []);
    Login or Signup to reply.
  2. 0

    You are storing the entire action object in the state instead of just the reset function, a.k.a. the action.payload. In other words, resetLogoutTimer in the other component isn’t the reset function, resetLogoutTimer.payload is.

    Update the reducer function from

    setLogoutTimerReset: (state, payload) => { // <-- payload is action object!
  state.resetLogoutTimer = payload;
},

    to

    setLogoutTimerReset: (state, action) => {
  state.resetLogoutTimer = action.payload;
},

    Since it’s preferable to store JSON serializable data in a Redux store you may also need to add/update the Serializability Middleware to handle the non-serializable function you are storing in the store.

    Example:

    const store = configureStore({
  ...,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [setLogoutTimerReset],
        ignoredPaths: ["resetLogoutTimer"],
      },
    }),
});

    This all said, it’s actually preferable to just lift the useIdleTimer hook and reset function higher in the ReactTree to a common ancestor and pass down as a props or via a React Context to the descendent components that need it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search