Is it possible to trigger a Redux action from outside a component?

Question

I'm building a React app and am calling a custom handler library to make calls to our REST API.

Within these (non-React) functions, I'd like to trigger Redux actions to update the store with the endpoint response, but can't figure out how to trigger the Redux action without the usual 'mapDispatchToProps'/connect() method.

Is this possible?

Thanks

score 146 · Accepted Answer · edited Aug 01 '20 at 16:20

146

In order to dispatch and action from outside of the scope of React.Component you need to get the store instance and call dispatch on it like

import { store } from '/path/to/createdStore';

function testAction(text) {
  return {
    type: 'TEST_ACTION',
    text
  }
}

store.dispatch(testAction('StackOverflow'));

edited Aug 01 '20 at 16:20

Nickofthyme

3,032
23
40

answered Jun 21 '18 at 07:28

Shubham Khatri

270,417
55
406
400

1

will this apply to react native as well? – Manuel Hernandez Apr 17 '19 at 03:53
3

@ManuelHernandez yes it will apply to react-native as well – Shubham Khatri Apr 17 '19 at 05:33
Thanks, this really helped – Manuel Hernandez Apr 17 '19 at 15:07
4

This is a anti-pattern? or should be used? – Igor Quirino Dec 14 '19 at 21:12
4

Is dispatch on store deprecated? I am importing store but does not have dispatch in it... – efirat Feb 28 '20 at 14:14
1

this is working on 19/03/2020 – bla Mar 19 '20 at 12:39

score -2 · Answer 2 · answered Jun 21 '18 at 07:33

I really love to copy the resolve/reject or onSuccess/onError pattern used by Promise.

So I suggest you to do the same thing. You call the custom handler and pass it an onSuccess and an onError callbacks. So when you fetch data you can call onSuccess and in case of error you can call the onError callback.

onSuccess and onError are functions that you will have in your component which will show to the user something or will do other stuff (show an error toast message in case of error ?!).

Let see an example:

export default class CustomService{
    getData(onSuccess, onError){
        //axios.get(...) or fetch(...)
        if(success) call onSuccess(result)
        if(error) call onError(error)
    }
}

export default class MyComponent extends React.Component{
   constructor(props){
       super(props);

       this.state = {
           showError:false
       }

       this.customService = new CustomService();

       this.onSuccess = this.onSuccess.bind(this);
       this.onError = this.onError.bind(this);
   }

   componentDidMount(){
       this.customService.getData(this.onSuccess, this.onError);
   }

   onSuccess(result){
       // Do something if necessary
       // Call the redux action
   }

   onError(error){
       //Show a toast message to user or do something else
       this.setState({showError:true});
   }
}

Inside the onSuccess you can call Redux to store your data.

Is it possible to trigger a Redux action from outside a component?

2 Answers2

Linked

Related