Реагировать Redux | подключить не отображать отправку реквизита

Question

Я новичок, чтобы реагировать, и я делаю небольшой бизнес-каталог, пока я учусь.

Я создал очень базовый c компонент, такой как:

BusinessDirectory. js

export class BusinessDirectory extends React.Component {

   componentWillMount() {
       console.log(this.props);
   }

    render() {
       return (<div><h1>Business Directory</h1></div>) 
    }
}

const mapStateToProps = state => ({
  businesses: state.businesses.items
});

export default connect(mapStateToProps, { fetchBusinesses })(BusinessDirectory);

Приложение. js

import React from "react";
import { Provider } from "react-redux";

import { BusinessDirectory } from "./components/BusinessDirectory";

import store from "./store";

export class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <BusinessDirectory />
      </Provider>
    );
  }
}

export default App;

Store. js

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  applyMiddleware(...middleware)
);

export default store;

Редукторы / индекс. js

import { combineReducers } from "redux";
import businessReducer from "./business.reducer";

export default combineReducers({
  businesses: businessReducer
});

редукторы / business.reducer. js

import { FETCH_BUSINESS, FETCH_BUSINESSES } from "../actions/types";

const initialState = {
  items: []
};

export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_BUSINESSES:
      return {
        ...state,
        items: action.payload
      };
      break;
   default:
      return state;
  }
}

business.action. js

import { FETCH_BUSINESSES } from "./types";

export const fetchBusinesses = () => dispatch => {
  fetch("http://localhost:5000/businesses")
    .then(res => res.json())
    .then(data =>
      dispatch({
        type: FETCH_BUSINESSES,
        payload: data.data
      })
    );
};

У меня проблема в том, что this.props внутри BusinessDirectory находится пустой объект, поэтому я не могу вызвать методы, которые я создаю. Я пытался сделать это с помощью mapDispatchToProp, но это также не работает.

Answer 1

Проблема в том, что в приложении. js вы импортируете неправильный компонент:

import { BusinessDirectory } from "./components/BusinessDirectory";

импортирует так называемый именованный экспорт, то есть то, что вы определили как

export class BusinessDirectory extends React.Component {

Это класс, который предполагает, что «кто-то» передает ему реквизиты.

С другой стороны,

import BusinessDirectory from "./components/BusinessDirectory";

импортирует экспорт по умолчанию, который является подключенным компонентом

export default connect(mapStateToProps, { fetchBusinesses })(BusinessDirectory);

то есть компонент, который на самом деле заботится о передаче реквизита из редукса.