Блог

Я пытаюсь создать внешний функциональный компонент, которому не нужно возвращать какой-либо JSX, а просто нужно отправить некоторое внутреннее состояние React в хранилище Redux. Чтобы сохранить App.js чистоту, я пытался сделать это во внешнем файле. По какой-то причине приведенный ниже код, где ChromeStoreToReduxStore отображается как дочерний компонент, не выдает ошибку.

ChromeStoreToReduxStore.js

 import { connect } from 'react-redux';
import * as actions from '../popupRedux/actions'

function ChromeStoreToReduxStore (props) {
  console.log(props)

  return null
}

export default connect(null, actions)(ChromeStoreToReduxStore);

  

App.js

 function App (props) {

  //state to keep track of local chrome store
  const [chromeStore, updateChromeStore] = useState({})

  ...
  console.log(ChromeStoreToReduxStore)

 ...
  return (
    <div className="App">
      <ChromeStoreToReduxStore chromeStore = {chromeStore} />
    </div>
  );
}

export default App
  

Однако вызов компонента, App.js как показано ниже, выдает следующую ошибку: TypeError: ChromeStoreToReduxStore is not a function

 //whenever local store state changes send to redux store
  useEffect(() => {
    ChromeStoreToReduxStore(chromeStore);
  }, [chromeStore])

  

console.log Ниже показано, что это, по-видимому, памятка react. Кто-нибудь может объяснить, почему я не могу вызвать эту функцию, завернутую в connect обычную функцию, и почему она, похоже, должна отображаться как дочерняя функция React?

Я знаю, что мог бы просто подключиться к хранилищу внутри App.js , но хотел бы знать, почему вышеуказанное не работает.