Redux Контейнер и mapDispatchToProps

Question

Я использую React-Redux для Redux вместе с React.Консольный журнал в App.js для this.props и this.props.fetchProducts возвращает пустой объект и неопределенный соответственно.

Первый вопрос, который я хочу задать, - почему это так и как я могу это исправить.

Второй вопрос, который у меня возникает, - как передать хранилище в CartPage и MainPage?Или это не рекомендуется, поскольку мы должны использовать connect для передачи любого значения состояния, которое нам нужно, вместо этого нашему компоненту?

Большое спасибо.

index.js

const rootReducer = combineReducers({
  ProductsReducer,
  PriceReducer,
  UserReducer
});

const store = compose(applyMiddleware(...middlewares))(createStore)(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>, 
  document.getElementById('root'));

App.js

class App extends Component {

  constructor(props) {
    super(props);
    console.log(this.props);
    console.log(this.props.fetchProducts);
  }

  render() {
    return (
      <Switch> 
        <Route exact path='/cart' render={() => <CartPage />} />
        <Route exact path='/' render={() => <MainPage />} />
      </Switch>
    );
  }
}

AppContainer

import { connect } from 'react-redux';
import { FetchProducts } from '../actions/FetchProducts';
import App from '../App';

const mapDispatchToProps = dispatch => ({
  fetchProducts: () => dispatch(FetchProducts())
});

export default connect(null, mapDispatchToProps)(App);

Answer 1

Замените App на AppContainer в вашем index.js.Для извлечения данных из хранилища вам всегда нужно использовать компоненты контейнера, упакованные в connect из Reaction-redux.

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <AppContainer />
    </BrowserRouter>
  </Provider>, 
  document.getElementById('root'));

Answer 2

1 - подключите компонент приложения к хранилищу с помощью mapStateToProps, а затем подтвердите результат.

2 - чтобы передать хранилище на главную страницу, я предпочитаю подключить вашу главную страницу и к хранилищу с использованием mapStateToProps илиВы можете передать данные, которые вы хотите, на главную страницу через специальные реквизиты как

<Route exact path='/cart' render={() => <CartPage />} fetchProductDetails={this.props.fecthProduct}/>