web-dev-qa-db-ja.com

JavascriptRedux-IDでストアから要素を取得する方法

過去数週間、私は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メソッドの前のページファイルに含めるべきか、それともアクションクリエーターを使用して関数をレデューサーに含めるべきかということです。レデューサーにはストアに影響を与えるアクションのみが含まれているように見えますが、私の場合はストアにクエリを実行するだけです。

前もって感謝します。

javascriptreactjsfluxredux
14
Kethmar Salumets

コンポーネントを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状態全体とコンポーネントの小道具を受け取り、そこから、小道具としてコンポーネントに送信するものを決定できます。したがって、すべてのアイテムを指定して、URLと一致するIDを持つアイテムを探します。

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

17
Dylan