Можно ли использовать redux и ax ios в библиотеке реагирующих компонентов? - PullRequest
Новая
       13

Можно ли использовать redux и ax ios в библиотеке реагирующих компонентов?

0 голосов
/ 14 марта 2020

Я создаю страницу в React. Скажем, например. Страница "Свяжитесь с нами". Весь этот компонент должен быть многоразовым. Так что другие команды могут использовать его как есть. Этот компонент будет иметь свое собственное хранилище избыточности и вызовы API, используя ax ios.

Что я хочу подтвердить, что если я экспортирую этот модуль «Свяжитесь с нами» как пакет npm, он будет работать нормально для других команд? Я спрашиваю об этом потому, что у других командных проектов будет свое собственное хранилище редуксов и экземпляр ax ios. И я думаю, что у нас может быть только один магазин избыточности в приложении и, может быть, один перехватчик топора ios (хотя я могу ошибаться в отношении топора ios)

Может ли кто-нибудь помочь мне, что можно сделать в этот случай? Одна вещь уверена, что мне придется экспортировать весь этот компонент как npm пакет.

1 Ответ

1 голос
/ 16 марта 2020

Я собираюсь ответить здесь, чтобы дать вам более подробную информацию: Допустим, ваш компонент выглядит следующим образом:

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,
};

Этот компонент просто занимает несколько реквизитов в порядке для работы, и функция fetchData будет отправлять любое действие приращения.

Так что в одном из приложений, которые собираются использовать библиотеку компонентов, предполагая, что у них есть свое собственное хранилище, вы можете сделать что-то вроде этого .

В компоненте, в котором вы планируете использовать компонент AboutUs. 

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 />
}

Это гарантирует, что ваш компонент может работать "из коробки" без избыточности, поскольку вы можете явно использовать его без зависимости от избыточности и просто передать обычные реквизиты, и он продолжит работать. Кроме того, если у вас есть другие приложения, где вы собираетесь его использовать, у вас будет контроль над тем, какую часть магазина вы хотите использовать для добавления реквизита для этого компонента. Проптипы здесь очень полезны, потому что мы навязываем несколько реквизитов, чтобы позволить разработчикам пройти то, что нам нужно, чтобы компонент работал правильно.

...