代码之家 › 专栏 › 技术社区 › Kethmar Salumets

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

redux flux reactjs javascript

Kethmar Salumets · 技术社区 · 9 年前

过去几周,我一直在努力学习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查询对象的函数在页面文件中,在呈现方法之前,或者我应该使用动作创建者并在reducer中包含该函数。我注意到reduceres似乎只包含对store有影响的动作,但我的只是查询store。

提前谢谢你。

2 回复 | 直到 9 年前

Dylan 9 年前

将组件连接到redux时,可以使用mapStateToProps函数查询存储:

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

sÉunÄ±É×ÉqÉp Zmey 4 年前

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

在这里 product_id 是API中的标签,并且 productID 是我在react路由器中给出的参数。

注意:不要忘记 match 关键字