Я пытаюсь понять, как отфильтровать список элементов с помощью реакции / избыточности.Я построил этот пример https://codesandbox.io/s/m3n0x7mqzj
. Я хочу, чтобы, когда я нажимал на категорию, product_id категории равнялся идентификатору категории, а затем возвращал продукты с таким же идентификатором
action.js: -
export const selectCategory = (data) => {
console.log("You clicked on category: ", data.name);
return {
type: 'CATEGORY_SELECTED',
payload: data
}
};
reducer-category.js
export default function (state = null, action) {
switch (action.type) {
case 'CATEGORY_SELECTED':
return action.payload;
default:
break;
}
return state;
}
category.js : -
import React, { Component } from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {selectCategory} from '../actions/index';
class Category extends Component{
renderList() {
return this.props.Data.categories.map((user) => {
return (
<option
key={user.id}
onClick={() => this.props.selectCategory(user)}
>
{user.name}
</option>
);
});
}
render() {
return (
<select>
{this.renderList()}
</select>
);
}
}
function mapStateToProps(state) {
return {
Data: state.Data
};
}
function matchDispatchToProps(dispatch){
return bindActionCreators({selectCategory: selectCategory}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(Category);