在 JavaScript 函数中访问 Redux 存储

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