コンポーネントを状態に渡す方法は？

Question

私はreduxとreact-routerを初めて使っています。 Productコンポーネントでは、productIdにアクセスできますが、どのように店舗にアクセスできますか？または、どのように製品をコンポーネントに渡すことができますか？

減速

const reducer = combineReducers({ 
    products: (state = []) => state, 
    routing: routerReducer 
}); 

const store = createStore(
    reducer, { 
    products: [{ 
     id: 1, 
     name: 'Product A', 
     price: 1000 
    }, { 
     id: 2, 
     name: 'Product B', 
     price: 2000 
    }] 
    } 
); 

コンポーネント

const Product = ({params}) => (
    <div> 
    Id: {params.productId} 
    </div> 
); 

class Products extends React.Component { 
    render() { 
    return (
     <div> 
     <h1>Products</h1> 
     <ul> 
      {this.props.children || 
      this.props.products.map(product => (
       <li key={product.id}> 
       <Link to={`/products/${product.id}`} >{product.name}</Link> 
       </li>))} 
     </ul> 
     </div> 
    ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    products: state.products 
    } 
}; 

const ProductsContainer = connect(
    mapStateToProps 
)(Products) 

ルート：

ReactDOM.render(
    <Provider store={store}> 
    { /* Tell the Router to use our enhanced history */ } 
    <Router history={history}> 
     <Route path="/" component={App}> 
     <IndexRoute component={Home}/> 
     <Route path="products" component={ProductsContainer}> 
      <Route path=":productId" component={Product}/> 
     </Route> 
     </Route> 
    </Router> 
    </Provider>, 
    document.getElementById('root') 
); 

Answer 1

製品がコンテナです。あなたはそれを経路に入れているからです。 プロダクトコンテナの場合と同じように、ストアを送信するにはconnectおよびmapStateToProps関数を使用する必要があります。