Redux容器和mapDispatchToProps

Question

我用Redux和React一起使用Redux。控制台登录到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替换为index.js中的AppContainer。您总是需要使用封装在connect中的容器组件从react 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}/>