Как мне справиться со своими реакциями с моими редукторами

Question

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

Это шаги:

1. В избыточном хранилище сохраните данные для каждой карты внутри карты, состояние по умолчанию для всех исходных данных на карте.

2. Заполните вид элементами с карты

3. При обновлении реакции запускайте действие, которое принимает элемент Id и ключ reaction (который является объектом) с типом и значением

4. Редуктор потребляет данные от действия и находит предмет по 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>
);

Answer 1

Присвойте свое значение, которое вы хотите обновить на редукторе в случае коммутатора следующим образом:

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 2

проверьте этот пример, который я создал - https://codesandbox.io/s/yp18326mzx

Итак, в основном у нас есть 2 действия для увеличения и уменьшения, которые манипулируют данными в центральном хранилище, это то, что вам нужно?

Answer 3

Ваш редуктор должен вернуть измененное состояние для вашего приложения.

   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;