What is the correct way to submit a non-component action using Redux?

Question

I have a project in which the nodejs server delivers push events to the interactive control panel via socket.io, I use Redux. When new data is received, the action is triggered to update all the relevant components, although I am not sure that the way I do this is correct.

This is how I track new incoming data from the server:

socket.on('incidents', state => { boundActionSetIncidentsList(state); }); 

And this is the creator of the limited action that is called in the new data:

  import { store } from '../index'; export function boundActionSetIncidentsList(incidents) { store.dispatch(actionSetIncidentsList(incidents)); } 

I need a store to post an action, as you can see that I am brutally importing it from the main index.js . Here's how it is created:

  export const store = createStore(); 

Being very new to responsiveness and shorthand, I was wondering what a decux way to send actions that do not start from a container or presentation component is. Thanks!

Answer 1

You can wrap your code that sets the socket listener as a function that takes storage as an argument. That way, at least your main client procedure can configure the repository and pass it to the socket receiver when it is ready.

You can also try using the library to help. Here is some shortcut middleware that can automatically send actions to the repository when the server sends data:

https://github.com/itaylor/redux-socket.io

Answer 2

The general suggestion is to control your socket connection either in the Redux middleware (which has access to the store dispatch method) or in the React component that processes the socket on the mount / disconnect components and can use React-Redux connect to get access to dispatch (or the creators of pre-recording actions for use with socket events).