Accessing Redux Store in a Util file

what is the best way to access redux store outside a react component?
access redux store from console
redux store example
redux getstate
connect to redux store outside component
access redux store from server
redux dispatch outside component
update redux store from component

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
}

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.

Access the Redux Store Outside a React Component, It's simple to get access to the store inside a React component – no need to pass the store as a prop or import it, just use the connect function from React Redux, and supply a mapStateToProps function that pulls out the data you need. Then, inside the component, you can pass that data to a function that needs it. In rare cases, you may need to access the Redux store directly in your own components. This can be done by rendering the appropriate context consumer yourself, and accessing the store field out of the context value. Note: This is not considered part of the React Redux public API, and may break without notice. We do recognize that the community has use cases where this is necessary, and will try to make it possible for users to build additional functionality on top of React Redux, but our


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
    )
  }
}

Accessing Redux Store in a Util file - reactjs - html, 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,  It’s simple to get access to the store inside a React component – no need to pass the store as a prop or import it, just use the connect function from React Redux, and supply a mapStateToProps function that pulls out the data you need. Then, inside the component, you can pass that data to a function that needs it.


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.

Store, The only way to change the state inside it is to dispatch an action on it. a hook to react to state changes, you might want to write a custom observeStore utility. Redux.org recommend that most applications should structure files using a "feature folder" approach (all files for a feature in the same folder) or the "ducks" pattern (all Redux logic for a feature in a single file), rather than splitting logic across separate folders by "type" of code (reducers, actions, etc).


Accessing the Store · React Redux, React Redux provides APIs that allow your components to dispatch If you truly need to access the store, this is the recommended approach. cases that are not sufficiently covered by the current APIs, please file an issue to  Redux doesn't have a Dispatcher or support many stores. Instead, there is just a single store with a single root reducing function . As your app grows, instead of adding stores, you split the root reducer into smaller reducers independently operating on the different parts of the state tree.


Accessing redux store inside functions · Issue #458 · reduxjs/react , js file , within that function i would prefer to have access to the variables in the store. Snippet of the code : -. import { connect } from 'react-redux'; Redux solves these problems by using pure reducers instead of event emitters. It's unfortunate that many still choose a framework based on whether it uses switch statements in the documentation. If you don't like switch , you can use a custom createReducer function that accepts a handler map, as shown in “reducing boilerplate” .


How can I access the store in non react components? · Issue #361 , We have a standard react-redux setup but we have a plain old api service class that need some of the information that we store in our redux  Folder structure for redux. 4). Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the