Redux: Shared actions

Question

I have a few actions in my app that need to be shared by a few different react components. For example, I have a fetchAPIData action creator which accepts some params and fires off actions to to make a fetch (using a custom fetch middleware i've written):

export function fetchAPIData(params) {

  const actions =  
    [
      types.API_CALL, 
      types.RECEIVE_API_DATA,
      types.API_ERROR
    ];

  const params = { 
    method: 'params.method',
    params
  };

  return fetch(actions, params);
};

This action and others like this needs to be called by various different parts of the app so i've created a common-actions directory where these actions live. This feels like the wrong approach so I am wondering if there is a more accepted way of doing this?

Answer 1

I would recommend you to use connect function react-redux

You can then import your actions to the top level component, and bind them with the state you want. then pass the props to any children you want. quick example:

import React, { Component } from 'react';
// Import actions below
import * as myActions from '/redux/actions/myActions';
// Make sure redux, react-redux are installed
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

class App extends Component {
  render() {
    const { redux, actions } = this.props; // the redux state.
    const { actionName } = actions;
    <div>
      <button onClick={() => actionName()}> {/* Dispatching redux action... */}
        Dispatch action
      </button>
      <ChildComponent {...this.props} />, {/* Now you can pass the props to any children */}
    </div>;
  }
}

// take any state from redux you want and return it within redux object
const mapStateToProps = state => ({
  redux: {
    myState: state.myState,
  },
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({
    ...myActions,
    // import actions below...
  }, dispatch),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App); // The component name you want to bind the state and the actions to.

I left notes so you can understand what's going on. This is ES6.