CODEWITHSUNDEEP
reactjsnpmreduxreact-reduxaxios
user10169731
user10169731

Reputation: 171

Is it possible to use redux and axios in react component library?

I am creating a page in React. Lets say for eg. "Conatct us" page. This whole component must be reusable. So that other teams can use it as it is. This component will have its own redux store and api calls using axios.

What I want to confirm that if I export this "Contact Us" module as npm package, will it work fine for other teams? Why I am asking this is because other teams project will have their own redux store and axios instance. And I think we can have only one redux store in an app and maybe one axios interceptors (I may be wrong about axios though)

Could anyone help me out, what can be done in this case? One thing is sure that I will have to export this whole component as npm package.

Upvotes: 2

Views: 1252

Answers (1)

jean182
jean182

Reputation: 3505

I'm going to answer here to give you more details: Let's say your component looks like this:

AboutUs:

import React, { Component } from "react";
import PropTypes from "prop-types";

export class AboutUs extends Component {
   componentDidMount() {
    const { fetchData } = this.props;
    fetchData();
   }

   render() {
    const { data, loading, error } = this.props;
    if (loading) return <p>Loading</p>;
    if (error) return <p>{error}</p>;
    return (
      // whatever you want to do with the data prop that comes from the fetch.
    )
   }
}

AboutUs.defaultProps = {
 error: null,
};

// Here you declare what is needed for your component to work.
AboutUs.propTypes = {
 error: PropTypes.string,
 data: PropTypes.shape({
  id: PropTypes.number,
  name: PropTypes.string,
 }),
 fetchData: PropTypes.func.isRequired,
 loading: PropTypes.bool.isRequired,
};

This component just takes a few props in order to work and the fetchData function will be a dispatch of any redux action.

So in one of the apps that are going to use the component library, assuming that they have their own store, you could do something like this.

In the component where you're planning to use the AboutUs component.

import React from "react";    
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
// this is the action that performs the data fetching flow.
import { fetchAboutUs } from "redux-modules/aboutUs/actions";
// The component that is above
import { AboutUs } from "your-component-library";

const mapDispatchToProps = dispatch => {
 return bindActionCreators(
  {
   fetchData: fetchDashboard,
  },
  dispatch
 );
};

const mapStateToProps = state => ({
 loading: state.aboutUsReducer.loading,
 error: state.aboutUsReducer.error,
 data: state.aboutUsReducer.data,
});

const ReduxAboutUs = connect(
 mapStateToProps,
 mapDispatchToProps
)(AboutUs);

// Use your connected redux component in the app.
const SampleComponent = () => {
 return <ReduxAboutUs />
}

This ensures that your component can work out of the box without redux, because you can explicitly use it without the redux dependency and just pass regular props and it will continue working. Also if you have different applications where you are going to use it you will have the control of which part of the store you want to use to inject the props for this component. Proptypes are quite useful here, because we're enforcing a few props in order let the devs what do we need to pass in order for the component to work properly.

Upvotes: 1

Related Questions