Как импортировать и вызывать реагирующую чистую функцию, которая использует redux connect и его функции? (Только React функциональных компонентов без классов) - PullRequest
Новая
       41

Как импортировать и вызывать реагирующую чистую функцию, которая использует redux connect и его функции? (Только React функциональных компонентов без классов)

0 голосов
/ 03 апреля 2020

Предположим, у меня есть реагирующая чистая функция с именем SignIn() в One. js: 

import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {GoogleSignin, statusCodes} from '@react-native-community/google-signin';
import {getToken, saveToken} from '../actions/token';

const SignIn = async ({token, getToken, saveToken}) => {
  const savedToken = await getToken();
  console.log(token.loading, savedToken);

  SignIn.propTypes = {
    token: PropTypes.string.isRequired,
    getToken: PropTypes.func.isRequired,
    saveToken: PropTypes.func.isRequired,
  };
};

const mapStateToProps = state => {
  console.log('state : ', state);
  return {
    token: state.token,
  };
};

export default connect(mapStateToProps, {saveToken, getToken})(SignIn);

Я хочу использовать эту функцию SignIn() в другом файле реагирования Two. js, чтобы getToken(), который является функцией-избыточником, и другие файлы будут вызываться из файла 1. js, и тогда я смогу использовать эти функции из файла 2. js, но проблема в том, что из-за подключения к избыточности я не могу экспортировать и использовать их. Как я могу импортировать и использовать такого рода функции внутри файла Two. js?

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

connect функция может быть реализована только с компонентами реагирования, которые отображают фактические jsx, и чтобы она работала, вам нужно вернуть jsx elements или null и назвать ее так <SignIn /> .. по моему мнению если вы хотите реализовать некоторую логику c с использованием redux, вы можете сделать custom hook, внедрить useSelector или useDispatch внутри нее и либо return получить нужные данные, либо просто выполнить effect внутри него ничего не возвращается.

надеюсь, что это поможет.

вот пример из react-redux документов https://react-redux.js.org/api/hooks#usedispatch

0 голосов
/ 14 апреля 2020

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

...