如何访问从Redux存储正确更新的功能？

Question

I have this component that I split for easy management. Before splitting everything worked as expected, after splitting I am getting an error when I click on an icon which calls the createReactionsIcon . Error says

TypeError: updateReaction is not a function
onClick
./components/home/components/SingleUpload.jsx:26
  23 | 
  24 |    return icons.map(({ key, text, type }) => (
  25 |        <IconText
> 26 |            onClick={() => updateReaction(item.id, key)}
     | ^  27 |            key={key}
  28 |            type={type}
  29 |            text={text}

How can I access this correctly from my Home component where updateReaction is returning updateReaction from the redux store.

SubComponent

import PropTypes from 'prop-types';
import React from 'react';
import { Avatar, Card, Icon, List } from 'antd';

import { LIST_TEXTS, STYLES } from '../constants';

const { AVATAR, CARD_CONTAINER, CARD_LIST, ICON, USER_LIST } = STYLES;
const { INNER, MORE, UPLOAD, VERTICAL } = LIST_TEXTS;

const IconText = ({ type, text, onClick }) => (
    <span>
        <Icon type={type} style={ICON} onClick={onClick} />
        {text}
    </span>
);
function createReactionsIcon(item, updateReaction) {
    const { like, dislike, maybe } = item.reactions;
    const icons = [
        { key: 'like', text: `${like.count}`, type: 'heart' },
        { key: 'dislike', text: `${dislike.count}`, type: 'dislike' },
        { key: 'maybe', text: `${maybe.count}`, type: 'meh' },
    ];

    return icons.map(({ key, text, type }) => (
        <IconText
            onClick={() => updateReaction(item.id, key)}
            key={key}
            type={type}
            text={text}
        />
    ));
}

export default class SingleUpload extends React.Component {
    render() {
        const { values } = this.props;

        return (
            <div style={CARD_CONTAINER}>
                <List
                    itemLayout={VERTICAL}
                    dataSource={values}
                    renderItem={item => {
                        const { avatar, description, id, uploader: { image, name } } = item;

                        return (
                            <List.Item style={USER_LIST}>
                                <Card
                                    actions={createReactionsIcon(item, this.updateReaction)}
                                    cover={<img alt={UPLOAD} src={image} />}
                                    extra={<Icon type={MORE} />}
                                    hoverable
                                    key={id}
                                    title={(
                                        <a href="/">
                                            <Avatar src={avatar} style={AVATAR} />
                                            {name}
                                        </a>
                                )}
                                    type={INNER}
                                    style={CARD_LIST}
                                >
                                    {description}
                                </Card>
                            </List.Item>
                        );
                    }}
                />
            </div>
        );
    }
}

Home.js

import PropTypes from 'prop-types';
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import SingleUpload from './SingleUpload';
import ComparisonUpload from './ComparisonUpload';
import { STYLES } from '../constants';
import * as actions from '../actions';
import { getUploads } from '../selectors';

const { CARD_CONTAINER } = STYLES;

class Home extends React.Component {
    componentDidMount() {
        const { actions: { requestUploadList } } = this.props;

        requestUploadList();
    }

    updateReaction = (id, reaction) => {
        const { actions: { updateReaction } } = this.props;
        const payload = { id, reaction };
        updateReaction(payload);
    }

    render() {
        const { uploads } = this.props;

        return (
            <div style={CARD_CONTAINER}>
                <SingleUpload values={[...uploads.values()]} />
                <ComparisonUpload values={[...uploads.values()]} />
            </div>
        );
    }
}

Home.propTypes = {
    actions: PropTypes.objectOf(PropTypes.object),
    uploads: PropTypes.instanceOf(Map),
};

const mapStateToProps = state => ({
    uploads: getUploads(state),
});

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(actions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Home);

Answer 1

Pass your function to component as props ,

<SingleUpload values={[...uploads.values()]} updateReaction = {this.updateReaction}/>

Now you can use this in your child component,

<IconText onClick={() => this.props.updateReaction(item.id, key)}

Answer 2

You can pass the updateReaction from your parent to child as a callback

<SingleUpload values={[...uploads.values()]} hanldeReaction={this.updateReaction} />

And you can access it in the child using props.hanldeReaction

    <Card actions={createReactionsIcon(item, this.props.hanldeReaction)}

Answer 3

You have to pass down the updateReaction() event-handler you defined in Home as a prop to SingleUpload . Then you can access that prop from anywhere inside your component.

Which means we can cleanup the actions prop inside the Card since we only need to pass the item now.

<Card actions={createReactionsIcon(item)}

As well as createReactionsIcon , now we just call that prop directly inside the function

function createReactionsIcon(item) {
    const { like, dislike, maybe } = item.reactions;
    const icons = [
        { key: 'like', text: `${like.count}`, type: 'heart' },
        { key: 'dislike', text: `${dislike.count}`, type: 'dislike' },
        { key: 'maybe', text: `${maybe.count}`, type: 'meh' },
    ];

    return icons.map(({ key, text, type }) => (
        <IconText
            onClick={() => this.props.updateReaction(item.id, key)}
            key={key}
            type={type}
            text={text}
        />
    ));
}

Less redundant code overall which sounds like what you are trying to achieve.