Question

我是React Redux环境的新手，目前遇到一个我很难理解的问题。

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

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

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

我的问题是，目前我的prevState已经具有我的nextState值，所以问题是我的组件Listlink无法用此新状态刷新。

我希望我很清楚

Firebase
反应，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
}

Redux先前状态已经具有新状态值，无法理解原因

1 个答案: