Question

在过去的几周里，我一直在努力学习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查询对象的函数是在页面文件中，在render方法之前，还是应该使用action creators并在reducers中包含该函数。我注意到redures似乎只包含在商店中存在impoact的操作，但我只是查询商店。

提前谢谢。

Answer 1

将组件连接到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状态和组件的道具，从中你可以决定将什么作为道具发送到组件。因此，考虑到我们所有的项目，请查找ID与我们的URL匹配的项目。

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

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关键字

Javascript Redux - 如何通过id

2 个答案: