2016-01-17 16 views
11

過去数週間、私はReactとReduxを学ぼうとしていました。 今私は正しい答えを見つけられなかったので、問題に会った。Javascript Redux - idからストアから要素を取得する方法

リンクから小道具を取得するReactにページがあるとします。今、このページの

const id = this.props.params.id; 

は、私は、このIDとSTOREからオブジェクトを表示したいと思います。

const initialState = [ 
     { 
     title: 'Goal', 
     author: 'admin', 
     id: 0 
     }, 
     { 
     title: 'Goal vol2', 
     author: 'admin', 
     id: 1 
     } 
    ] 

私の質問は:メソッドをレンダリングする前にSTOREからオブジェクトを照会する機能は、ページファイルにする必要があります 、または私はアクションの作成者を使用し、減速中の関数を含める必要があります。 私は、reduceresにはストアにインパクトのあるアクションだけが含まれているように見えますが、私はちょうどストアに問い合わせます。

ありがとうございます。

答えて

12

あなたはmapStateToPropsあなたはReduxのにコンポーネントを接続したときに店を照会する機能を使用できます。

import React from 'react'; 
import { connect } from 'react-redux'; 
import _ from 'lodash'; 

const Foo = ({ item }) => <div>{JSON.stringify(item)}</div>; 

const mapStateToProps = (state, ownProps) => ({ 
    item: _.find(state, 'id', ownProps.params.id) 
}); 

export default connect(mapStateToProps)(Foo); 

(この例では、lodash使用 - _)を

mapStateToProps機能は全体Reduxの状態になりますあなたのコンポーネントの小道具、そしてそこから小道具としてあなたのコンポーネントに送るものを決めることができます。だから私たちのすべてのアイテムを与えられた私たちのURLに一致するidを持つものを探します。

https://github.com/rackt/react-redux/blob/master/docs/api.md#arguments

+0

このいただき、誠にありがとうございます:) –

+0

@Dylanを、私は '_find(状態、{ID:ownProps.params.id})があることが分かった'正常に動作します。この '_.find(state、 'id'、ownProps.params.id)から、私は適切な結果を得ていませんでした。 – Srinivas

関連する問題