时间戳

首页 > 解决方案 > 如何更新数组的redux状态？

javascript - 如何更新数组的redux状态？

问题描述

因此，我正在使用 react redux nodejs 和 mongoDB 创建类似“Trello”的克隆，但我遇到了一些问题。问题是当我将卡片添加到列表时，它不会更新 redux 状态，所以我只会在刷新页面后才能在列表中看到卡片。（卡添加到数据库但未添加到 redux 状态）。

仅供参考：boardlists 是来自 mongo 的对象板内的一个数组，在该数组内有列表对象，在每个对象内都有一个卡片数组。

这是我的代码：

减速器

const initialState = {
  boardLists: [
    
  ],
};

export default function (state = initialState, action) {
  switch (action.type) {
    case FETCH_ITEMS_BEGIN:
      return {
        ...state,
        loading: true,
        errors: null,
      };
    case FETCH_ITEMS_SUCCESS:
      return {
        ...state,
        loading: false,
        boardLists: action.payload.data.boardLists,
      };
    case FETCH_ITEMS_FAILURE:
      return {
        ...state,
        loading: false,
        errors: action.payload.errors,
        boardLists: [],
      };
    //handless creation of data
    case ADD_LIST:
      return {
        boardLists: [...state.boardLists, action.payload.list],
      };

    case ADD_CARD:
      return {
        boardlists: [...state.boardlists, action.payload.card],
      }

行动

export const fetchItemsBegin = () => ({
  type: FETCH_ITEMS_BEGIN,
});
export const fetchItemsSuccess = (data) => ({
  type: FETCH_ITEMS_SUCCESS,
  payload: { data },
});
export const fetchItemsFailure = (errors) => ({
  type: FETCH_ITEMS_FAILURE,
  payload: { errors },
});

//dispatched when item needs to be created
export const addList = (list) => {
  return {
    type: ADD_LIST,
    payload: { list },
  };
};

// add card
export const addCard = (card) => {
  return {
    type: ADD_CARD,
    payload: { card }
  };
};

//dispatched when all the lists from board stored in redux store needs to be read
export const getBoardLists = () => {
  return (dispatch) => {
    // function starts
    dispatch(fetchItemsBegin()); // fetching begins
    return http
      .get(`${myUrl}/boards/one`) // req data from server
      .then(({ data }) => {
        console.log(data);

        // if data is found
        dispatch(fetchItemsSuccess(data)); // success
      })
      .catch((error) => dispatch(fetchItemsFailure(error))); //errors
  };
};

处理添加功能的组件

handleAddCard = () => {
    //add card
    const { text } = this.state;
    const { listID } = this.props;
    const newCard = {
      // _id: uuidv4(),
      text,
    };
    cardService.createCard(newCard, listID);
    this.props.addCard(newCard);
  };

.
.
.
.
.
const mapStateToProps = ({ boardLists, loading, errors }) => ({
  boardLists,
  loading,
  errors,
});

export default connect(mapStateToProps, { addList, addCard, getBoardLists })(ActionButton);

标签： javascriptreactjsmongodbreduxnodes

解决方案

看来您需要更新列表数组中的对象，而不是将卡片项目添加到列表数组本身。

在行动中：

// add card
export const addCard = (card, listId) => {
  return {
    type: ADD_CARD,
    payload: { listId, card }
  };
};

在 Reducer 中，您需要找到具有匹配 id 的列表并将卡片添加到其数组中，例如：

case ADD_CARD:
  const {listId, card} = action.payload;
      return {
        ...state,
        boardLists: state.boardLists.map(list => {
          list.cards = list.cards || [];
          return list.id === listId ? {...list, cards: [...list.cards, card]} : list
        }),
      }

关于堆栈溢出的另一个问题可能对这部分有用。关联

推荐阅读