Accessing Redux Store in a Util file

user_1189352 0
Viewed 6409

TLDR: I want to be able to grab the latest Redux State in an external "Util" file. How can I do this?

Say I have a playlist.. and in many different areas of the app, you can "Start" the playlist. So in a "Util" file I have the "startPlaylist" function so I dont have to write the function in numerous places but in only one place.

The problem with this, is that if I make any changes to the playlist while the playlist is running, "playNextPageInPlaylist" function will not receive any updates to the playlist.

What can I do and change so that my function(s) in the Util file will receive the most updated Redux State?

I have startPlaylist function in 7 different areas, and the functions it involves (all in the Util file) are quite complex.. and it wouldn't make sense to copy and paste that in all 7 files.

Thanks for any help

React.Component File 1

import { startPlaylist } from '../util/EntitiesUtil';

start1() {   
  startPlaylist( store.playlists[0] ); 
}

React.Component File 2

import { startPlaylist } from '../util/EntitiesUtil';

start2() {
  startPlaylist( store.playlists[0] );
}

EntitiesUtil.js

export function startPlaylist( playlistFromStore ) {
  // do stuff
  playNextPageInPlaylist( playlistFromStore );  // keeps grabbing next page on a timer
}
react-redux redux reactjs
3 Answers

You got couple of options, the main options as i see it are:

  1. pass the store to the function (bah please don't do that!).
  2. You can write your own middleware that handles certain action types and can dispatch other actions if needed (you also get a free access to the ENTIRE store!).

I think the 2nd option is ideal, as you want your util to do stuff that reflect in the store or need stuff from the store. So basically your util wants to be a part of the redux flow!
Well it's not a component so you can't "connect" it but it can (and should be in my opinion) ad middleware that sits between your actions and reducers.

You can read about middlewares here.
I would have provided you an example of your use case but you didn't post any meaningful code.

Edit
A followup to your comment:

Its quite basic.

  1. You have a signature of a function that never changes, just look at the docs (it uses currying, this is another js topic you should learn)
  2. You need to inject it to the store when you create it with applymiddleware (same as you did with redux-thunk which is a middleware by itself).

I realy recommend to look at the source code of redux-thunk the whole 11 lines of it.
You can learn a lot from it.

user_31488070

I believe the store has a getState() method available to you.

Import your created store and then call store.getState()

Check out this example from redux's main site:

http://redux.js.org/docs/api/Store.html#example

function select(state) {
  return state.some.deep.property
}

let currentValue
function handleChange() {
  let previousValue = currentValue
  currentValue = select(store.getState())

  if (previousValue !== currentValue) {
    console.log(
      'Some deep nested property changed from',
      previousValue,
      'to',
      currentValue
    )
  }
}
user_31759050

We faced a similar issue in using corporate ui react library where state creation was delegated to core library. Thus, exporting store as public variable was not an option to us.

However, there is a horrible way of 'public static variable' that will be updated with your root reducer or 'slicing reducers'.

so, you should make some 'store-util.tsx' with 'let utilStore' variable and export some setter (for reducer) and getter (for any utility functions) functions.

user_85870280
Related