I am using redux with a basic react app. I am building a simple checkAuthenticated redux action that connects with my django backend and verifies the users authentication state so that when they refresh the page it doesnt log them out. The crux of my issue is that I want to run checkAuthenticated only once when they first connect to the page. I am not sure how best to implement this. I have tried wrapping the create root in a function and directly calling checkAuthenticated which doesnt call it, and I cant use connect because it is not a component.
index.js
// other imports
import { checkAuthenticated } from './actions/auth'
const router = createBrowserRouter([
{
path: '/',
element: <HomePage />,
},
{
path: '/create-post',
element: <CreatePostPage />,
},
{
path: '/login',
element: <LoginPage />
},
{
path: '/register',
element: <RegisterPage />
}
]);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
// this is how I want it { checkAuthenticated }
<RouterProvider router={router} />
</Provider>
</React.StrictMode>
);
auth.js
export const checkAuthenticated = () => async dispatch => {
// doing authentication stuff
}