How to access the Redux store outside of a component in React

Profile picture for J. Diaz
J. Diaz

I am beginning with Redux and I always used it in components with connect() and mapStateToProps(), but now I want to call my API with setInterval() every x time to check if the server has new data not stored in the Redux store, and substitute it.

My approach was to create a function that reads the store and update it like that:

import { store } from './dir/dir/store.js'

const refresher = async () => {

    const state = store.getState();

    // Call API, compare 'state.calendar' with calendar from server
    // Call store.dispatch() if they are different, then update Redux store

}

export default refresher

My questions are:

  • Is this a good practise to use Redux?
  • Is there a better approach to this problem?

Thanks

It's perfectly fine to export the store and use within a vanilla js/ts file.

Example Redux Store

Make sure to export the store that you create

import { configureStore } from "@reduxjs/toolkit";
import { slice } from "../features/counterSlice";

export const store = configureStore({
  reducer: {
    counter: slice.reducer
  }
});

Usage in Non-Component Code:

You can then import the created store in any other code

import { store } from "../App/store";
import { slice as counterSlice } from "../features/counterSlice";

export function getCount(): number {
  const state = store.getState();
  return state.counter.value;
}

export function incrementCount() {
  store.dispatch(counterSlice.actions.increment());
}

Traditional Usage in Functional Component

import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../App/store";
import { slice as counterSlice } from "../features/counterSlice";

export function Clicker() {
  const dispatch = useDispatch();
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatchIncrement = () => dispatch(counterSlice.actions.increment())
  // ...

Example Slice

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

export const slice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    }
  }
});

Demo in Codesandbox

Note: You cannot use this option with Server Side Rendering. If you need to support SSR, you can use middleware to listen to dispatched actions and handle elsewhere.

Further Reading