Redux 以前的状态已经有新的状态值无法理解为什么

Question

我是 react redux 环境的新手，目前面临一个我难以理解的问题。

我制作了一个带有链接列表的页面。 当我单击“添加链接”按钮时，我可以向列表添加一个链接，然后出现一个带有表单的模式。

当我提交表单时，当我从 link.utils.js 触发我的方法 addLinkItem 时，新链接将添加到 firebase

我正在使用 react-thunk 在 firebase 添加成功时进行调度，这是一个如何更新我的链接状态的操作。

我的问题是此时我的 prevState 已经有了我的 nextState 值，所以问题是我的组件 Listlink 没有用这个新状态刷新。

希望我说的够清楚

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

您可以找到此 repo 的所有项目：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
}