Access Redux store in JavaScript function

Question

Is it possible to map redux state to a regular javascript function rather than a React component?

If not, is there another way for connecting redux state to a function? (obviously without explicitly passing it in as a param)

I have tried connecting to a function, but it breaks (I don't have an exact error message. the server just hits an uncaughtException). Since React components can be pure functions, does connect() only work with a class ComponentName extends Component (and the likes)?

The reason I want to do such a thing:

I have an redux action generator, and I want the generator to skip doing an API call if it finds the action's result already in the redux state, but I don't want to have to check state explicitly from every container for every single api call. Does this make sense?

Thanks for any ideas.

Answer 1

connect() comes with react-redux package which is React bindings for Redux. But if you want to interact with Redux state with usual JavaScript you don't need either connect() or react-redux for that. You can directly interact with Redux store with its API.

As an example, if you want to listen to actions you can use subscribe() method as follows and use getState() method to access the state.

let unsubscribe = store.subscribe(function(){
  const state = store.getState();
})

I'm not much clear what you are trying to achieve, but I hope this will help.

Edit:

You can create your store in one file and export it.

store.js

import { createStore } from 'redux'
import reducers from "./reducers";

const store = createStore(reducers)

export default store;

Now you can import store from any other file and use it.

import store from "./store";

Answer 2

Suppose you have an action. Just add some marker - and the reducer will detect whether skip that or not:

Action:
{
  type: 'SOMETYPE',
  paylod: data,
  shouldSkip: true
}

Reducer:
export default function ( state = {}, action ) {
  if(action.shouldSkip)
    return state
  switch ( action.type ) {
    case "OTHER_TYPE":
      return action.payload;
    default:
      return state;
  }
}