Javascript Redux - 如何通过id从store获取元素

Question

过去几周我一直在努力学习React和Redux。现在我遇到了一个问题，还没有找到正确的答案。

假设我有一个React页面，可以从链接中获取属性。

const id = this.props.params.id;

现在在这个页面上，我想展示一个来自STORE并带有此ID的对象。

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

我的问题是：从STORE查询对象的函数应该在渲染方法之前的页面文件中吗？还是应该使用action creator并将函数包含在reducers中。我注意到reducers似乎只包含对store有影响的操作，而我的操作只是查询存储。

提前感谢。

- Kethmar Salumets

Answer 1

您可以使用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状态和组件的props，您可以从中决定将什么作为组件的props发送。因此，给定所有项目，请查找与我们URL匹配的ID相符的项目。

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

- Dylan

---

非常感谢您的这个 :) - Kethmar Salumets

@Dylan，我发现_find(state, {id: ownProps.params.id})可以正常工作。但是从_.find(state, 'id', ownProps.params.id)中我没有得到正确的结果。 - Srinivas

自从引入了filter，您可以直接使用this.state.filter(item => item.id == id);。 - Patrick Mutuku

@PatrickMutuku filter 会返回一个数组 -- 你还需要获取第一个索引项 -- filter(..)[0]。如果支持的话，现在也可以使用 Array.prototype.find。 - Dylan

Answer 2

import _ from 'lodash'; const mapStateToProps = (state, ownProps) => ({ item: _.find(state.data, (e) => e.product_id == ownProps.match.params.productID) });

这里的product_id是API中存在的标签，而productID是我在react-router中提供的参数。

注意：不要忘记match关键字

- Abhinav Srivastava