[Redux]aタグをクリックした際にアクションを実行するには

Question

聞きたいこと

aタグのonClick属性に、actionで定義した関数を指定し、引数を渡したいと思っています。
下に書いてあるような実装をしているのですが、エラーになってしまいうまく実行できません。
どなたかヒント等ありましたら教えていただきたいです。

コード・エラー内容

• Components

import React, { Component } from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';

import { readLanguages, readRepositories } from '../actions';

class LanguagesIndex extends Component {
  componentDidMount() {
    this.props.readLanguages()
  }

  renderLanguages() {
    return _.map(this.props.languages, language => (
      <React.Fragment>
        |<a href="#" onClick={this.props.readRepositories(language.id)}>{language.name}</a> ！！！←ここのaタグのonClickに対してアクションで定義したreadRepositories関数を割り当てたい
      </React.Fragment>
    ))
  }

  render() {
　　省略
}

const mapStateToProps = state => ({ languages: state.languages })
const mapDispatchToProps = ({ readLanguages, readRepositories })

export default connect(mapStateToProps, mapDispatchToProps)(LanguagesIndex)

• Action

import axios from 'axios';

export const READ_REPOSITORIES = 'READ_REPOSITORIES';
export const READ_LANGUAGES = 'READ_LANGUAGES';

const ROOT_URL = 'https://api.server.com';
const OPTIONS = {
  headers: {
    'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods' : 'GET,PUT,POST,DELETE,PATCH,OPTIONS'
  }
};

export const readRepositories = () => async (dispatch, id=1) => { ！！！←ここでidとしてパラメーターを受け取れるようにしたい
  const response = await axios.get(`${ROOT_URL}/repositories?id=${id}`, OPTIONS);
  // console.log(Config());
  dispatch({ type: READ_REPOSITORIES, response });
}

export const readLanguages = () => async dispatch => {
  const response = await axios.get(`${ROOT_URL}/languages`, OPTIONS);
  dispatch({ type: READ_LANGUAGES, response });
}

• エラー内容

index.js:2178 Warning: Expected `onClick` listener to be a function, instead got a value of `object` type.
    in a (at languages_index.js:15)
    in td (at languages_index.js:33)
    in tr (at languages_index.js:26)
    in tbody (at languages_index.js:25)
    in table (at languages_index.js:24)
    in LanguagesIndex (created by Connect(LanguagesIndex))
    in Connect(LanguagesIndex) (at index.js:19)
    in div (at index.js:18)
    in Provider (at index.js:17)

Comments

[xenbeat]

https://teratail.com/help#posted-otherservice

[xenbeat]

https://ja.stackoverflow.com/questions/45360/a%E3%82%BF%E3%82%B0%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%97%E3%81%9F%E9%9A%9B%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF

[sabx]

マルチポスト非推奨のルールがあったのですね…すいませんでした…他の質問サイトの質問に関しては削除しました。ご指摘ありがとうございます。

Answer 1

前提

※ action creatorの書き方から、redux-thunkミドルウェアを使っていると解釈したので、それを前提とした回答になります。
※ 動作確認をしていないので変なミスがあったり、質問には掲載されていないコードの部分でエラーが出る可能性もありますが、その場合は、とりあえず参考までにということで。

component

class LanguagesIndex extends Component {
	
	//(略)
	
	readRepositories(event, id) {
		// リンク先が#だけど、一応いれておく。
		event.preventDefault();
		
		this.props.readRepositories(id)
	}

	renderLanguages() {
		return _.map(this.props.languages, language => (
			<React.Fragment>
				<a 
					href="#" 
					onClick={(event) => this.readRepositories(event, language.id)}
				>
					{language.name}
				</a>
			</React.Fragment>
		))
	}

	// (略)
}

action

//(略)
export const readRepositories = (id = 1) => async (dispatch) => { 	
	const response = await axios.get(`${ROOT_URL}/repositories?id=${id}`, OPTIONS);
	dispatch({ type: READ_REPOSITORIES, response });
}
//(略)

Comments

[sabx]

ご回答ありがとうございます！
無事解決できました！ちなみに今回はaタグのonClick属性には、LanguagesIndexコンポーネント内で定義した関数を使用していますが、
直接Actionを実行することも可能なのでしょうか…？
最初に私が上記方法でトライしようとしたのですが、うまくいかず…仕様的に無理とかでしょうか・・・

[HayatoKamono]

どういたしまして！回答に載せていたコードのonClick部分を`onClick={() => this.props.readRepositories(language.id)}`に変えても動作すると思います。

[sabx]

なるほど…ありがとうございました！