A way to modify the redux store from a component that is not inside the Provider?

Question

I have a component named Listener, it's purpose is to just listen to all the native events such as when AppState, BackPress, NetInfo and Geolocation.

I have setup my root like below:

class Root extends Component {
  render() {
    return (
      <Listener>
        <Provider>{children}</Provider>
      </Listener>
    );
  }
}

The problem here is I can not use connect from react-redux. Is there another way to dispatch an action or modify the store from outside the Provider scope such as Listener on my setup?

Basically Provider is not a normal Provider from redux, it's my custom Provider that I used to contain all logic in creating the redux setup in one place.

A snippet of it would be

export default class Provider extends Component {
   store: Object;
   constructor(props){
      super(props);
      this.store = createStore(....);
   }
}

What did you want to do in the end? – Robert Mennell Jun 29 '18 at 06:13 — Robert Mennell, Jun 29 '18 at 06:13

score 1 · Answer 1 · answered Jun 29 '18 at 06:13

1

Yes its possible. If you have access to the store object you created and passed to the provider, you can directly dispatch an action. ex

import store from './store'

store.dispatch(increment());

The documentation is here, https://redux.js.org/api-reference/store

answered Jun 29 '18 at 06:13

This didn't work for me. Sorry I forgot to mention that I abstracted all my redux and persistence data inside the ProviderComponent. – Jojo Narte Jun 29 '18 at 07:29
@JojoNarte then make a ref to the provider inside the root component – rowinbot Jun 30 '18 at 02:34

score 0 · Answer 2 · answered Jun 29 '18 at 07:35

To fix it, even though I really wanted to have the Listener to be on the outer scope, I switched its place with the Provider

class Root extends Component {
  render() {
    return (

        <Provider>
          <Listener>{children}</Listener>
        </Provider>

    );
  }
}

With this I can now use connect from react-redux. It seems to be the only cleaner way for now.

A way to modify the redux store from a component that is not inside the Provider?

2 Answers2