Javascript 如何使用redux还原剂处理我的反应？

我有三个图标，每个图标上都有一个文本，如果被点击，文本会增加，这会处理我在帖子上的反应。我的想法是，我可以一次点击一个反应，双击一个反应会反转到以前的状态，这是帖子上反应的传统方式。我已经制定了要采取的步骤，我已经制定了我的行动，并为减速器做了基础工作，但在这一点上，我不知道如何继续

以下是步骤：

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

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

在反应更新时，触发一个动作，该动作采用一个具有类型和值的项

Id

和一个

reaction

键（这是一个对象）

Reducer使用操作中的数据并按Id查找项

5.更新项目的给定反应类型

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;
}
};

actions.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>
);

{text}
);

减速器应返回应用程序的修改状态

   export default (state = { ...INITIAL_STATE }, action) => {
     switch (action.type) {
      case LIKE_REACTION: 
        const { Id, reaction } = action.payload;
        let newState = { ...state }; //be careful, this is a shallow copy
        //TODO: perform the changes you want in state here
        //newState = something...
        return newState;

---

减速器应返回应用程序的修改状态

   export default (state = { ...INITIAL_STATE }, action) => {
     switch (action.type) {
      case LIKE_REACTION: 
        const { Id, reaction } = action.payload;
        let newState = { ...state }; //be careful, this is a shallow copy
        //TODO: perform the changes you want in state here
        //newState = something...
        return newState;

---

在开关情况下，指定要在reducer上更新的值，如下所示：

case LIKE_REACTION: {
        return {
            ...state,
            value: action.payload
        };
    }

您可以在此处的组件上获得更新值：

const mapStateToProps = (state) => {
    console.log(state)
    return{
       value: state.value
    }
};

现在，您可以在以下位置获得更新值：

componentWillReceiveProps(nextProps, preProps) {
        this.setState({value: nextProps.value})
    }

现在，将组件中更新的状态值用作this.state.value

---

如需更多了解react生命周期，请阅读：

在如下开关情况下，指定要在减速器上更新的值：

case LIKE_REACTION: {
        return {
            ...state,
            value: action.payload
        };
    }

您可以在此处的组件上获得更新值：

const mapStateToProps = (state) => {
    console.log(state)
    return{
       value: state.value
    }
};

现在，您可以在以下位置获得更新值：

componentWillReceiveProps(nextProps, preProps) {
        this.setState({value: nextProps.value})
    }

现在，将组件中更新的状态值用作this.state.value

---

有关react生命周期的更多了解，请阅读：

查看我创建的示例-

---

因此，基本上我们有两个操作来递增和递减，这两个操作操作中央存储中的数据，这是您需要的吗？

检查我创建的这个示例-

---

因此，基本上我们有两个操作来递增和递减，这两个操作操作中央存储中的数据，这就是您需要的吗？

我更困惑了。你能给出一个具体的工作例子吗？我更困惑了。您是否可以给出一个具体的工作示例？假设我有这样一个案例：{const{payload}=action；const{reactionFlow}=state；return{…state，reactionFlow:updateReactionType（payload，reactionFlow），}；}我如何从这里和下一个案例开始讨论我的组件。您的组件使用connect from redux，并按照您在MapStateTrops中的说明，以道具形式接收此状态？如果是这样，react/redux将负责更新该组件。如果没有，您可以按照。我不确定我是否理解你所说的下一个案例的意思。如果您指的是switch/case中的cases，那么每个case都应该根据其操作意图为redux存储提供必要的更改。如果您指的是其他组件交互，那么每个交互都是独立的，并且会触发对redux存储/组件的一次更新，比如说我有类似于此的案例

的反应：{const{payload}=action；const{reactionFlow}=state；return{…状态，reactionFlow:updateReactionType（有效负载，reactionFlow），}；}

我如何从这里和下一个案例开始到我的组件。您的组件使用connect from redux，并按照您在MapStateTrops中的说明作为道具接收此状态？如果是，react/redux将负责更新该组件。如果不是，您可以按照。我不确定是否理解您所说的下一个案例的含义。如果您是指案例在switch/case中，每个case都应该根据其操作意图对redux存储进行必要的更改。如果您指的是其他组件交互，则每个交互都是独立的，并将触发对redux存储/组件的一次更新否，一点也不？是这样的；我有三种反应：

喜欢

，

不喜欢

和

可能

。我点击

喜欢

，它会增加1，我再次点击它会减少1，反之亦然，就像你遇到的任何传统网站一样，比如facebook、twitter或其他什么。而且我不能同时点击

喜欢

和

不喜欢

，这是它们中的任何一个。一种方法是维护ain状态like-liked:null，如果liked为“True”，则将like图标切换为ON，如果liked为“False”，则将LOKE图标切换为ON，如果“null”同时禁用like-LOKE，则您可以为MAYBEI维护另一个状态如果您用于facebook上的评论，则您的状态类似于state={“Comment”：“某物”，喜欢：对，也许：错}不，一点也不？是这样的；我有三种反应：

喜欢

，

不喜欢

和

可能

。我点击

喜欢

，它会增加1，我再次点击，它会减少1，反之亦然，就像你遇到的任何传统网站一样，比如facebook、twitter或其他什么。而且我不能有

喜欢

，和

不喜欢

同时单击，它是其中之一。一种方法是保持状态like-like:null，如果like为“True”，则将like图标切换为ON，如果like为“False”，则将不喜欢图标切换为ON，如果为“null”禁用这两个选项，你可以为maybeIf维护另一个状态如果你在facebook上使用评论，你的状态应该是state={“Comment”：“something”，liked:True，Maybe:False}