我有三个图标，每个图标都有一个文本，如果点击，每个图标都会增加，处理我对帖子的react。这个想法是我可以一次点击一个react，双击一个react可以反转到以前的状态，就像对帖子的react一样。我已经制定了要采取的步骤，我已经创建了我的操作并完成了减速器的基础知识，但此时我不知道如何继续。

这些是步骤：

1. 在redux store中，将每张卡片的数据保存在一张地图中，所有初始数据的默认状态都在一张地图中。

2. 使用地图中的项目填充视图

3. 在react更新时，触发带有类型和值的项目Id和reaction键（这是一个对象）的操作

4. Reducer 消耗来自 action 的数据并通过 Id 查找项目

5.更新物品的给定react类型

reducers.js

import { DISLIKE_REACTION, LIKE_REACTION, MAYBE_REACTION } from './actionTypes';

const INITIAL_STATE = {
  reactionFlow: new Map(),
};

/**
* Creates a Javascript Map for each card as an object mapped by id
*
* @param {Array} reactions - array of user reaction objects
* @return {Map} - the new reaction list
*/
function generateItemMap(reactions) {
const setOfReactions = new Map();

reactions.forEach(reaction => {
    const { _id } = reaction;

    setOfReactions.set(_id, reaction);
});

return setOfReactions;
}

/**
* Updates the given reaction type of the item
*
* @param {Object} reaction - the reaction object with a type and value
* @param {Map} type - the type of reactions
* @return {Map} - the updated user reaction
*/
function updateReactionType(reaction, type) {
const { _id } = reaction;
const newType = new Map([...type.entries()]);

newType.set(_id, reaction);

return newType;
}

export default (state = { ...INITIAL_STATE }, action) => {
switch (action.type) {
    case LIKE_REACTION: {
        return {
            ...state,
        };
    }

    case DISLIKE_REACTION: {
        return {
        };
    }

    case MAYBE_REACTION: {
        return {
            ...state,
        };
    }

    default:
        return state;
}
};

动作.js

/**
 * Triggers request to like or unlike post
 *
 * @function
 * @return {Object} The {@link actionTypes.LIKE_REACTION LIKE_REACTION}
 * action.
 */
export const likeReaction = () => ({
    type: LIKE_REACTION,
});

/**
 * Triggers request to dislike post or reverse dislike
 *
 * @function
 *
 * @param {Object} payload - the data sent with the action
 * @return {Object} The {@link actionTypes.DISLIKE_REACTION DISLIKE_REACTION}
 * action.
 */
export const dislikeReaction = payload => ({
    payload,
    type: DISLIKE_REACTION,
});

/**
 * Triggers request to maybe post or reverse maybe
 *
 * @function
 *
 * @param {Object} payload - the data sent with the action
 * @return {Object} The {@link actionTypes.MAYBE_REACTION MAYBE_REACTION}
 * action.
 */
export const maybeReaction = payload => ({
    payload,
    type: MAYBE_REACTION,
});

零件

  <span>
    <Icon type={type} />
    {text}
  </span>
);