2

I'm doing a project using redux-hooks, I m new to redux-hooks. I am having actions.js file having different API call function. and to dispatch the action from a component using useDispatch(). do I have to import every function from actions.js to my different component to dispatch the action? or any methods are there? thanks in advance

1 Answer 1

3

Before react-redux incorporated hooks into their library it was typical to split the parts of redux into their own container file. There you would map the actions and state that you needed into props that you would pass into the component. For example containers and components would look something like this.

Container Example.js:

// Node Modules
import {connect} from 'react-redux';

// Actions
import {action1, action2} from '../actions';

// Components
import ExampleComponent from './ExampleComponent';

// Actions
const mapDispatchToProps = (dispatch) => ({
  action1: () => dispatch(action1()),
  action2: () => dispatch(action2()),
});

// State
const mapStateToProps = (state) => ({
  state1: state.example.state1,
  state2: state.example.state2,
});

export const Example = connect(mapStateToProps, mapDispatchToProps)(ExampleComponent);

Component ExampleComponent.jsx:

// Node Modules
import React from 'react';

const Example = (props) => (
  <div>
    <label>{props.state1}</label>
    <label>{props.state1}</label>
    <button onClick={props.action1}>Action 1</button>
    <button onClick={props.action2}>Action 2</button>
  </div>
);

export default Example;

Although you could write both the container and component elements together in one file, this is just an example of how Redux could be used within React. With the introduction of hooks into react-redux you can now access the Redux store through their provided hooks.

Component ExampleComponent.jsx:

// Node Modules
import React from 'react';
import {useDispatch, useSelector} from 'react-redux';

// Actions
import {action1, action2} from '../actions';

const Example = (props) => {
  // Dispatch
  const dispatch = useDispatch();

  // Redux State
  const state1 = useSelector((state) => state.example.state1);
  const state2 = useSelector((state) => state.example.state2);
  return (
    <div>
      <label>{state1}</label>
      <label>{state1}</label>
      <button onClick={() => dispatch(action1())}>Action 1</button>
      <button onClick={() => dispatch(action2())}>Action 2</button>
    </div>
  );
};
export default Example;

With this method you can import your component directly from the ExampleComponent.jsx file instead of having to import it through a container. For your actions, you only need to import what you need to use for the component and wrap it with the dispatch hook that react-redux provides.

5
  • If I have to call more than 5 actions in components, Is there any way like using mapdispatchtoprops and actioncreators to bind them as props or I have to import all the action methods in components? Aug 24, 2019 at 4:04
  • 1
    You could import * as Actions from '../actions'; and reference them as Action.action1() or Action.action2() when you need them.
    – ppak10
    Aug 24, 2019 at 4:07
  • @ppak10 How we can call async action using dispatch?
    – Ganpat
    Feb 27, 2020 at 11:59
  • @Ganpat Redux does not support async actions out of the box and you will have to use some middleware such as redux-thunk to make it work
    – ppak10
    Feb 27, 2020 at 18:43
  • 1
    @ppak10 Thanks, now I'm using redux-thunk and calling like dispatch(action1()).then(response => {console.log(response)}, error => {console.log(error)}) for api call. Assume action1() is async-await function which return response after web api call.
    – Ganpat
    Feb 28, 2020 at 9:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.