React Native: HeadslessJS and Redux - How to access store from task

Question

We have a ReactNative app that uses redux, redux-persist and a HeadlessJS task. This task needs to have access to the store. As the task fires without booting the entire app (and so has no access by default), we thought we could simply create the store inside the task as well so that it would be rehydrated by redux-persist. It turns out, however, that the store created in this way is different from the one in the app: after running, they contain different values. We tested this in several ways and it seems indeed a problem with the stores (and not with the actions for instance) How should we access a Redux store from an HeadlessJS task?

Relevant code: store/configure.js:

configureStore = (client) => {
  const middleware = createMiddleware(client);
  const finalCreateStore = applyMiddleware(thunk, middleware, logger)(createStore);
  const store = finalCreateStore(rootReducer, undefined, autoRehydrate());

  return store;
};

In use (both in the app and in the service):

const client = new ApiClient();
const store = configureStore(client);
client.setStore(store);
persistStore(store, {
  storage: AsyncStorage,
}

In the app we simply use the Provider from react-redux to use the store, in the service we use store.dispatch.

Answer 1

For people looking for solution. I have found the solution in here. The idea is to bind the store to async method.

https://github.com/react-native-kit/react-native-track-player/issues/63

Copy pasting the solution here.

// index
const store = ...
....registerHeadlessTask('TrackPlayer', () => require('event-handler.js').bind(null, store));
// event-handler.js
module.exports = async (store, data) {
    if(data.type == '...') {
        store.dispatch(...);
    }
};