Can I dispatch an action in reducer in ReactJs

In Javascript, Redux is used as container to store states for many apps.  mostly Redux is used with React. It relies on actions that get dispatched and listened by reducers, and which update the state accordingly.

We’ll have a glance at dispatching the action and at isolating the components from Redux.

Let us consider an example of that allows a user to send messages to the group.

We will create a react form MessageSender.js and hit the send button to send the message to an API(Application programming interface) for handling data.

Below are the different ways of dispatching an action :

Passing the dispatch method to the component

The react dispatch method is available on the store object. An action gets dispatched to trigger an update to the react Redux store.

// App.js
import { createStore } from 'redux';
import { MessageSender } from './MessageSender';
import reducer from './reducer';
const store = createStore(reducer);
class App extends React.Component {
 render() {
 <MessageSender store={store} />
 };
};
// MessageSender.js
import { sendMsg } from './actions';
// ...
this.props.store.dispatch(sendMsg(msg))
// ...

 Firstly, In the above code we are importing <MessageSender/> component to the App.js and passing store value to the component. 

 Then, In the MessageSender component we are importing an action that is {sendMsg}  and dispatching the msg.

Using React-Redux to make dumb/smart components

The drawback of using the previous logic is that your component is aware of the app logic. The best practice is to separate the component logic in a smart component connected to the store from the user interface. That is through the dumb component. We can create a messageSender.Conatoner.js file in  which we can connect the component using the connect method.

 The second argument to connect is the function mapDispatchToProps, and which is a wrapper for all the action creators using the react dispatch method and is passed to the component.

From the official docs for connect in redux, we can understand that  we can describe mapDispatchToProps this way:

If an object is passed, and each function inside it is assumed to be a react Redux action creator. An object with the same function names, and but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

The above implies that we do’t need to dispatch our actions. We just need to passing an object to “connect”. We can then call the react wrapped actions from our props.

// MessageSender.container.js
import { connect } from 'react-redux';
import { sendMsg } from './actions';
import MessageSender from './MessageSender';
const mapDispatchToProps = {
 sendMsg
};
export default connect(null, mapDispatchToProps)(MessageSender);
// MessageSender.js
// ...
this.props.sendMsg(msg);
// ...

In the above code, We are using mapDispatchToProps object and pasing sendMsg in the object.

Then, we are passing the connect method which taken multiple parameters, that is mapDispatchToProps and MesaageSender. Below in the MessageSender.js component we are passing the message or action that this.props.sendMsg(msg);

If we want to dispatch more actions in a single method, we can do that as shown below:

import { connect } from 'react-redux';
import { sendMsg, navigateTo } from './actions';
const mapDispatchToProps = dispatch => ({
 sendMsg: msg => {
  dispatch(sendMsg(msg));
  dispatch(navigateTo({ routeName: 'myMsgList' }));
 }
});
export default connect(null, mapDispatchToProps)(MessageSender);

 In the above container, we are passing multiple actions to the single method, we are dispatching the sendMsg and navigation to some route.

Export default is the convention is takes multiple params. That is mapDispatchToProps and action . 

// MessageSender.js
// ...
this.props.sendMsg(msg);
// ...
});

Similar to the previous one we are passing the action in the MessageSender.js file.

Thus, These are few ways of dispatching action in the reducer using redux. No one option is considered the best, as it fully depends on our use case. When we want to dispatch an action from our React component, we need to first connect it with the store and use the “connect” method of react redux.