How to dispatch redux action outside of a componen

Question

I'm using redux in my react-native mobile app.
The communication with the backend is via websockets using socket.io.

I organize the project in a way where I have a file (you could call it an object) which initialize the socket client.
The handlers are registered to it, and I want to send actions to the reducers.

socket.js:

export function createSocket (url) {
  console.log(`connecting to ${url}`)
  // dispatch(actions.CONNECT)
  return io(url)
}

How can I dispatch actions from those functions outside of any react component?

Answer 1

If you initialise the socket client at startup time, just pass your redux store into the function and then use store.dispatch()

export function createSocket (url, store) {
  console.log(`connecting to ${url}`)
  store.dispatch(actions.CONNECT)
  return io(url)
}

If not at startup, then your socket creation should be triggered by some user action (or something similar) in which case you should be able to get a reference to the dispatch function using the redux-thunk middleware:

//the action returns a function, which gets called with store.dispatch as an argument
const myAction = someArg => dispatch => {
    createSocket(url, dispatch);
};

See https://github.com/reduxjs/redux-thunk for details