15

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.

jacoballenwood
  • 2,787
  • 2
  • 24
  • 39

2 Answers2

29

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";
Tharaka Wijebandara
  • 7,955
  • 1
  • 28
  • 49
  • Hello! Thanks for your comment. Is the store available globally? Or how would I make it available in a specific JavaScript file? Thanks! – jacoballenwood May 12 '17 at 18:56
  • Ah! So naive question: is `store.getState()` the same value as connecting state to props with connect in a React container? – jacoballenwood May 12 '17 at 19:26
  • yes it's the same value we get inside `mapStateToProps(state)` – Tharaka Wijebandara May 12 '17 at 19:28
  • Super helpful. I was unsure what to do until I saw this answer, i.e., whether I need to connect a component or use a middleware (https://github.com/reactjs/react-redux/issues/361#issuecomment-212491715). Thank you. – Con Antonakos Sep 07 '17 at 20:02
0

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;
  }
}
kurumkan
  • 2,635
  • 3
  • 31
  • 55
  • Thanks for your answer. The problem is that the same action will take an id param and return data from the API for that specific id. If I've already asked for data for one id, I still want to fire the action off for a different id. That is why I wanted to check to see if the data was already in state for a given action with specific parameter. Does that make sense? – jacoballenwood May 12 '17 at 19:04
  • 1
    Well. You can actually access application state with other workarounds. But generally using middlewares, and action meta is what I prefer. But anyway check this http://stackoverflow.com/questions/38460949/what-is-the-best-way-to-access-redux-store-outside-a-react-component – kurumkan May 12 '17 at 19:13
  • Oh nice! I didn't realize there was a similar question. Thanks! – jacoballenwood May 12 '17 at 19:26