时间戳

首页 > 解决方案 > 在redux中管理具有ID的多个列表项的状态

reactjs - 在redux中管理具有ID的多个列表项的状态

问题描述

每当我单击一个列表项时，我的 DOM 中有多个列表项，我为该特定项调用 API 并将其存储在我的 Redux 存储中，当我单击 DOM 中的另一个项时，我将它添加到我的 redux 存储中的数组中。

我面临的问题是当我再次单击同一个列表项时我不想再次点击 API 我想显示已经存储在我的 redux 商店中的特定列表项的数据我应该怎么做？

我的减速机代码

import * as actionTypes from '../actions/actionTypes';

const initialState = {
    fareRules: [],
    error: false
};

const reducer = (state = initialState, action) => {
    switch(action.type) {
        case actionTypes.SET_FARE_RULES:
            return {
                ...state,
                fareRules: [
                    ...state.fareRules,
                    {
                        id: action.id,
                        rules: action.fareRules[0][0]
                    }
                ]
            }
        case actionTypes.GET_FARE_RULES_FAILED:
            return {
                ...state,
                error: true
            }
        default:
            return state;
    }
}

export default reducer;

标签： reactjsredux

解决方案

在处理单击项目的处理程序中，您需要检查商店中是否已存在该项目的票价规则（您的组件需要有权访问商店）。

如果该项目的票价规则不存在，则添加它们（触发相关操作），否则显示它们。

推荐阅读