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

Question

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

@HamzaKhattabi - It is everywhere but the components that use the store are already working, I just need to modify the store outside a component. — J. Diaz
– J. Diaz, Commented Nov 17, 2020 at 22:48
@krimo - Thanks, I followed that example in the link - I think that is what I needed, but not so sure. — J. Diaz
– J. Diaz, Commented Nov 17, 2020 at 22:49

KyleMit · Accepted Answer · 2021-07-04 22:37:16Z

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.

import {updateLocationAlertItem} from './src/store/actions/locationAlertAction';
import {store} from './src/store/index';

store.subscribe(listener);

function listener() {
    state = store.getState().locationAlertReducer;
}


store.dispatch(
   updateLocationAlertItem({
        index: index,
         is_in_radius: true,
         is_notification: true,
         arrival_time: moment().format('DD/MM/YYYY hh:mm'),
         exit_time: item.exit_time,
   }),
);

answered Feb 13, 2023 at 13:33

Engr.Aftab Ufaq

1

Collectives™ on Stack Overflow

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

2 Answers 2

Example Redux Store

Usage in Non-Component Code:

Traditional Usage in Functional Component

Example Slice

Demo in Codesandbox

Further Reading

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Example Redux Store

Usage in Non-Component Code:

Traditional Usage in Functional Component

Example Slice

Further Reading

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related