2016-01-17 1 views
11

In den letzten Wochen habe ich versucht, React und Redux zu lernen. Jetzt habe ich ein Problem getroffen, dass ich keine richtige Antwort gefunden habe.Javascript Redux - wie man ein Element aus dem Geschäft von ID

Angenommen, ich habe eine Seite in React, die Requisiten von der Verbindung bekommt.

Jetzt auf dieser Seite möchte ich ein Objekt aus STORE mit dieser ID anzeigen.

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

Meine Frage lautet: sollte die Funktion der das Objekt aus dem STORE sein in der Auslagerungsdatei abzufragen, bevor die Methode machen, oder sollte ich Aktion Schöpfer verwenden und schließen Sie die Funktion in Reduzierungen. Ich habe festgestellt, dass die Reducer nur Aktionen enthalten, die auf den Laden wirken, aber meine fragt nur den Laden ab.

Vielen Dank im Voraus.

Antwort

12

könnten Sie die mapStateToProps-Funktion verwenden, um den Laden zu fragen, wenn Sie die Komponente redux verbinden:

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); 

(Dieses Beispiel verwendet lodash - _)

Die mapStateToProps Funktion im gesamten redux Zustand nimmt und die Requisiten Ihrer Komponente, und Sie können entscheiden, was Sie als Requisiten an Ihre Komponente senden möchten. Wenn Sie alle unsere Artikel verwenden, suchen Sie nach dem Produkt mit der ID, die unserer URL entspricht.

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

+0

Vielen Dank für diese :) –

+0

@Dylan, fand ich heraus, dass '_find (Staat, {id: ownProps.params.id})' fein arbeiten. Von diesem '_.find (state, 'id', ownProps.params.id)' habe ich keine richtigen Ergebnisse erhalten. – Srinivas

Verwandte Themen