18-mapStateToProps的第二个参数

Time: 20200129

本文讲讲关于mapStateToProps的一些细节。

App.js

import React from 'react';
import './App.css';
import { Provider } from 'react-redux'
import store from './redux/store'
import CakeContainer from './components/CakeContainer';
import HooksCakeContainer from './components/HooksCakeContainer';
import IceCreamContainer from './components/IceCreamContainer'
import NewCakeContainer from './components/NewCakeContainer';
import ItemContainer from './components/ItemContainer';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <ItemContainer cake />
        <ItemContainer />
        <CakeContainer />
        <HooksCakeContainer />
        <IceCreamContainer />
        <NewCakeContainer />
        
      </div>
    </Provider>
    
  );
}

export default App;

ItemContainer.js

import React from 'react'
import { connect } from 'react-redux'

function ItemContainer(props) {
    return (
        <div>
            <h2>Item - {props.item}</h2>
        </div>
    )
}

// 可以在这里将此组件自身的props加入到参数中来
// state是指store的状态，这个需要明确
// 这是想把store的状态的某些值映射到本组件的props上来
const mapStateToProps = (state, ownProps) => {
    const itemState = ownProps.cake 
            ? state.cake.numOfCakes 
            : state.iceCream.numOfIceCream
    return {
        item: itemState
    }
}

export default connect(mapStateToProps)(ItemContainer)

就是说，在mapStateToProps中，除了state参数（store的状态），还可以将组件自身的props作为第二个参数。这样在父组件向本组件传递props的时候，可以判断是否有某个属性。

这也是很常见的用法。

END.