Question

我将React-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中将AppContainer替换为index.js。您始终需要使用react-redux中包装在connect中的容器组件来从存储中检索数据。

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}/>

Redux容器和mapDispatchToProps

2 个答案: