Как я могу обновить свои реакции, когда я нажимаю на любую иконку

Question

У меня есть компонент. Я управляю состояниями с использованием избыточности и обращаюсь к данным массива для компонента из хранилища избыточности, используя новую карту. Я должен быть в состоянии получить значение моей иконки, чтобы увеличить при нажатии. Я не уверен, как получить доступ к значениям моих реакций, чтобы заставить это работать и обрабатывать мое событие нажатия с handleReactions

constants.js

/** @constant */
export const INITIAL_STATE = {
    uploads: new Map(),
};

export const USER_UPLOADS = [
    {
        _id: 0,      
        image: 'http://sugarweddings.com/files/styles/width-640/public/1.%20The%20Full%20Ankara%20Ball%20Wedding%20Gown%20@therealrhonkefella.PNG',
        reactions: {
            dislike: 0,
            like: 0,
            maybe: 0,
        },
        story: "It's my birthday next week! What do you think?",
        user: 'Chioma',
    },
    {
        _id: 1,        
        image: 'https://dailymedia.com.ng/wp-content/uploads/2018/10/7915550_img20181007141132_jpeg01c125e1588ffeee95a6f121c35cd378-1.jpg',
        reactions: {
            dislike: 0,
            like: 0,
            maybe: 0,
        },
        story: 'Going for an event. Do you like my outfit?',
        user: 'Simpcy',
    },
    {
        _id: 2,        
        image: 'https://i0.wp.com/www.od9jastyles.com/wp-content/uploads/2018/01/ankara-styles-ankara-styles-gown-ankara-tops-ankara-gowns-ankara-styles-pictures-latest-ankara-style-2018-latest-ankara-styles-ankara-ankara-styles.png?fit=437%2C544&ssl=1',
        reactions: {
            dislike: 0,
            like: 0,
            maybe: 0,
        },
        story: 'Saturdays are for weddings. Yay or nay?',
        user: 'Angela',
    },
];

actions.js

import { UPDATE_REACTION, REQUEST_UPLOAD_LIST } from './actionTypes';

/**
 * Triggers request to react on a post
 *
 * @function
 * @return {Object} The {@link actionTypes.REQUEST_UPLOAD_LIST REQUEST_UPLOAD_LIST}
 * action.
 */
export function updateReaction(itemid, reaction) {
    return {
        itemid,
        reaction,
        type: UPDATE_REACTION,
    };
}

/**
 * Triggers request for the lists of uploads
 *
 * @function
 * @return {Object} The {@link actionTypes.REQUEST_UPLOAD_LIST REQUEST_UPLOAD_LIST}
 * action.
 */
export const requestUploadList = payload => ({
    payload,
    type: REQUEST_UPLOAD_LIST,
});

reducers.js

import { UPDATE_REACTION, REQUEST_UPLOAD_LIST } from './actionTypes';
import { INITIAL_STATE, USER_UPLOADS } from './constants';

/**
 * Creates a Javascript Map with the user uploads mapped by id
 *
 * @param {Array} USER_UPLOADS - a users uploads
 * @return {Map} - the user uploads
 */

function generateUploadsMap() {
    const setOfUserUploads = new Map();

    USER_UPLOADS.forEach(userUpload => {
        const { _id } = userUpload;

        setOfUserUploads.set(_id, userUpload);
    });

    return setOfUserUploads;
}

function updateItemReactions(itemid, reaction, uploads) {
    const upload = uploads.get(itemid);
    upload.reactions = {
        ...upload.reactions,
        [reaction]: upload.reactions[reaction] + 1,
    };
    uploads.set(itemid, upload);
    return uploads;
}

console.log(updateItemReactions());
export default (state = { ...INITIAL_STATE }, action) => {
    switch (action.type) {
        case REQUEST_UPLOAD_LIST: {
            return {
                ...state,
                uploads: generateUploadsMap(),
            };
        }
        case UPDATE_REACTION: {
            const { uploads } = state;

            return {
                ...state,
                uploads: updateItemReactions(action.itemid, action.reaction, uploads),
            };
        }

        default:
            return state;
    }
};

home.js

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

import { LIST_TEXTS, STYLES } from '../constants';
import * as actions from '../actions';
import { getUploads } from '../selectors';

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

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

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

        requestUploadList();

    }

        updateReaction = (itemid, reaction) => {
        const { updateReaction } = this.props.actions;
        updateReaction(itemid, reaction);
    }

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

        return (
            <div style={CARD_CONTAINER}>
                <List
                  itemLayout={VERTICAL}
                  dataSource={values}
                  renderItem={item => (
                      <List.Item style={USER_LIST}>
                          <Card
                            actions={createReactionsIcon(item, this.updateReaction)}
                            cover={<img alt={UPLOAD} src={item.image} />}
                            extra={<Icon type={MORE} />}
                            hoverable
                            title={(
                                <a href="/">
                                    <Avatar src={item.image} style={AVATAR} />
                                    {item.user}
                                </a>
                            )}
                            type={INNER}
                            style={CARD_LIST}
                          >
                              {item.story}
                          </Card>
                      </List.Item>
                  )}
                />
            </div>
        );
    }
}

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

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

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

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

Answer 1

В mapDispatchToProps вы связали создателей своих действий и установили для actions пропущенную в компоненте Home.

Элемент Icon, сгенерированный в createReactionsIcon, не знает способа обработки события onClick, не предоставляя способ отправить действие в redux-store для обновления реакции на него.

В Home, actions.updateReactions необходимо переадресовать на createReactionsIcon и зарегистрировать для события onClick для его IconText.

render() {
  //...
  <Card
    actions={createReactionsIcon(item, this.props.actions.updateReaction)}
  //...
}

В createReactionsIcon,

function createReactionsIcon(item, updateReaction) {
  const { like, dislike, maybe } = item.reactions;


  const icons = [
    { reaction: 'like', text: `${like}`, type: 'heart'},
    { reaction: 'dislike', text: `${dislike}`, type: 'dislike'},
    { reaction: 'maybe', text: `${maybe}`, type: 'meh'},
  ];
  //...
  return icons.map(({ reaction, text, type }) => (
    <IconText 
      onClick={() => updateReaction(item._id, reaction)} 
      key={reaction}
      type={type}
      text={text}
    />
  ));
}

Здесь определение updateReaction создатель действия в actions.js должно быть изменено, чтобы включить больше полей, таких как предметы и реакции на действие.

function updateReaction(itemid, reaction) {
  return {
    type: UPDATE_REACTION,
    itemid,
    reaction
  }
}

Затем создается редуктор для типа действия UPDATE_REACTION, чтобы использовать его для обновления реакции для идентификатора элемента в reducer.js.

///...
case UPDATE_REACTION:
  const { uploads } = state;

  return {
    ...state,
      uploads: updateItemReaction(action.itemid, action.reaction, uploads),
    };
  }
///...

, где updateItemReaction - это функция, определенная как:

function updateItemReaction(itemid, reaction, uploads) {
  const upload = uploads.get(itemid)
  const uploadUpdate = {
    ...upload,
    reactions: {
      ...upload.reactions,
      [reaction]: upload.reactions[reaction] + 1
    }
  }

  uploads.set(itemid, uploadUpdate)
  return uploads;
}

Теперь, пока вышеописанным способом является то, как вы видите, что объект в хранилище - Map. Необходимо позаботиться об обновлении только той части магазина, которая изменилась, чтобы перерисовывались только компоненты, использующие значения из этой части магазина.

Я настоятельно рекомендовал рассмотреть возможность использования неизменяемых структур данных для состояния вашего компонента или строго относиться к хранилищу как к неизменяемым с помощью простых объектов.