How to dispatch redux action outside of a component?

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?

My project is already integrated with `redux-saga`. Is there a way to do it with it? — itaied, Jun 10 '18 at 20:32
Yes, both can work at the same time, although you could get the same result using a saga instead of a thunk in this case. — andrralv, Jun 10 '18 at 20:33

score 14 · Accepted Answer · answered Jun 10 '18 at 20:32

14

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

answered Jun 10 '18 at 20:32

Duncan Thacker

5,073
1
10
20

In m case, using umi - redux - react, store does not have dispatch function. even after initialized. Do you know why I can not access dispatch? – efirat Feb 28 '20 at 12:58
1

@efirat `app._store.dispatch` is available in umi-dva-react. – Charanjit Singh Jul 24 '20 at 11:33
https://v2.umijs.org/guide/with-dva.html#how-to-access-store-or-dispatch It Says `window.g_app._store` window.g_app._store.dispatch – Charanjit Singh Jul 24 '20 at 11:42

How to dispatch redux action outside of a component?

1 Answers1

Linked