Question

我有三个图标，如果单击它们，每个图标上的文字应递增，以处理我对帖子的反应。我的想法是，我可以一次单击一个反应，双击反应可以恢复到以前状态，这是帖子上反应的常规方式。我已经计划好要采取的步骤，已经创建了动作并完成了减速器的基础知识，但是目前我还不知道如何进行。

这些步骤是：

在redux存储中，将每张卡的数据保存在地图中，所有初始数据的默认状态都在地图中。
使用地图中的项目填充视图
在更新反应时，触发采取具有类型和值的项目--- version: "3" services: site-a: image: nginx volumes: - /home/chris/docker/site-a:/usr/share/nginx/html labels: traefik.frontend.rule: "PathPrefixStrip:/site-a/" traefik.enable: true traefik.port: 80 site-b: image: nginx volumes: - /home/chris/docker/site-b:/usr/share/nginx/html labels: traefik.frontend.rule: "PathPrefixStrip:/site-b/" traefik.enable: true traefik.port: 80 frontend: image: traefik command: --api --docker --logLevel=DEBUG ports: - "80:80" # Expose the Traefik web UI on port 8080. We restrict this # to localhost so that we don't publicly expose the # dashboard. - "127.0.0.1:8080:8080" volumes: - "/var/run/docker.sock:/var/run/docker.sock" labels: traefik.enable: false和Id键（是一个对象）的动作
Reducer通过操作消耗数据并通过ID查找项目

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

reaction

reducers.js

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

组件


/**
 * 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,
});

Answer 1

您的reducer应该为您的应用程序返回修改后的状态。

   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;

Answer 2

在切换情况下，在减速器上分配要更新的值：

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。

要进一步了解反应生命周期，请阅读：http://busypeoples.github.io/post/react-component-lifecycle/

Answer 3

检查我创建的此示例-https://codesandbox.io/s/yp18326mzx

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

如何使用Redux减速器处理反应？

3 个答案: