2016-01-17 18 views
11

Trong những tuần qua tôi đã cố gắng tìm hiểu React và Redux. Bây giờ tôi đã gặp một vấn đề thay vì tôi đã không tìm thấy một câu trả lời đúng.Redux Javascript - cách lấy một phần tử từ cửa hàng theo id

Giả sử tôi có một trang trong React lấy đạo cụ từ liên kết.

const id = this.props.params.id; 

Bây giờ trên trang này, tôi muốn hiển thị đối tượng từ STORE với ID này.

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

Câu hỏi của tôi là: nên các chức năng để truy vấn các đối tượng từ các cửa hàng có trong file trang, trước khi phương pháp render, hay tôi nên sử dụng sáng tạo và hành động bao gồm các chức năng trong gia giảm. Tôi đã nhận thấy rằng các bộ giảm tốc dường như chỉ chứa các hành động có impoact trên cửa hàng, nhưng tôi chỉ truy vấn cửa hàng.

Cảm ơn bạn trước.

Trả lời

12

Bạn có thể sử dụng mapStateToProps chức năng để truy vấn các cửa hàng khi bạn kết nối các thành phần để 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); 

(Ví dụ này sử lodash - _)

Chức năng mapStateToProps mất trên phạm vi toàn quốc Redux và đạo cụ của thành phần của bạn, và từ đó bạn có thể quyết định những gì để gửi như đạo cụ cho thành phần của bạn. Vì vậy, cho tất cả các mục của chúng tôi, hãy tìm một với id phù hợp với URL của chúng tôi.

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

+0

Cảm ơn bạn rất nhiều cho việc này :) –

+0

@Dylan, tôi phát hiện ra rằng '_find (trạng thái, {id: ownProps.params.id})' sẽ hoạt động tốt. Từ này '_.find (state, 'id', ownProps.params.id)' Tôi đã không nhận được kết quả thích hợp. – Srinivas

Các vấn đề liên quan