Javascript Redux - 如何通过 id 从商店获取元素答案

【问题标题】：Javascript Redux - how to get an element from store by idJavascript Redux - 如何通过 id 从商店获取元素
【发布时间】：2016-04-22 19:31:17
【问题描述】：

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

假设我在 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 似乎只包含对商店有影响的操作，但我的只是查询商店。

提前谢谢你。

【问题讨论】：

标签： javascript reactjs flux redux

【解决方案1】：

当你将组件连接到 redux 时，你可以使用 mapStateToProps 函数来查询 store：

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 发送给组件。因此，给定我们所有的项目，寻找 ID 与我们的 URL 匹配的项目。

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

【讨论】：

非常感谢你:)
@Dylan，我发现_find(state, {id: ownProps.params.id}) 可以正常工作。从这个_.find(state, 'id', ownProps.params.id) 我没有得到正确的结果。
由于引入了过滤器，可以直接使用this.state.filter(item => item.id == id);
@PatrickMutuku filter 将在那里返回一个数组——您还需要获取第一个索引项——filter(..)[0]。现在，如果支持，您也可以使用Array.prototype.find。

【解决方案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 关键字

【讨论】：