Redux предыдущее состояние уже имеет новое значение состояния не может понять, почему

Question

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

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

Когда я отправляю форму, новая ссылка добавляется в firebase, когда я запускаю свой метод addLinkItem из ссылки.utils.js

Я использую реагирование-отправку для отправки, когда добавление в firebase завершилось успешно, действие как обновить состояние моих ссылок.

Моя проблема в том, что в данный момент у моего prevState уже естьмое значение nextState, так что проблема в том, что мой компонент Listlink не обновляется с этим новым состоянием.

Надеюсь, я был ясен

• Firebase
• React,Redux, redux-logger, redux-thunk

Вы найдете весь проект в этом репо: https://github.com/FrancoisSilab/klaxoon-test-bookmarks/blob/master/README.md

const handleSubmit = event => {
    event.preventDefault();
    addLinkItem(inputValues);
  };

add-link-modal.component.jsx

export const addLinkItem = (link) => {
  return dispatch => {
    // On obtient la référence de la collection links
    const colRef = firestore.collection("links");
    // On ajoute le nouveau linkItem comme nouveau document
    colRef
      .add(link)
      .then(function(docRef) {
        console.log("Document successfully written!");
        link["id"] = docRef.id;
        dispatch(addLinkItemAction(link));
        dispatch(resetInput());
      })
      .catch(function(error) {
        console.error("Error writing document: ", error);
      });
  };
};

links.utils.js

export const addLinkItemAction = (link) => ({
  type: LinksActionsTypes.ADD_LINK,
  payload: link
});

links.actions.js

const INITIAL_STATE = {
  linksItems: []
};

const linkReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case LinksActionsTypes.GET_LINKS:
      return {
        ...state,
        linksItems: action.payload
      };
      case LinksActionsTypes.ADD_LINK:
        state.linksItems.push(action.payload);
        return {
        ...state,
        linksItems: state.linksItems
      };
      case LinksActionsTypes.DELETE_LINK:
      return {
        ...state,
        linksItems: deleteLinkItem(state.linksItems, action.payload)
      };
    default:
      return state;
  }
};

export default linkReducer;

links.reducer.jsx

Answer 1

Проблема в том, что вы мутируете государством.Вместо нажатия на старый массив:

state.linksItems.push(action.payload);
return {
  ...state,
  linksItems: state.linksItems
};

... создайте копию массива и добавьте к нему.

const newLinkItems = [...state.linkItems, action.payload];
return {
  ...state,
  linkItems: newLinkItems
}