时间戳

首页 > 解决方案 > 我是否应该在 Redux 中嵌套数据并在循环中使用 if？

reactjs - 我是否应该在 Redux 中嵌套数据并在循环中使用 if？

问题描述

我是 React 新手，但不是开发新手。在接受培训后，我目前正在从事我的第一个独立项目。

我正在创建一个小应用程序，用户可以在其中创建任何类型的列表和列表项。我有以下列表和列表项：

列表 -> 儿童电影（ID：1，完成标签：已观看）列表项目（在儿童电影下）：

列表 -> 清洁（ID：2，完成标签：完成）列表项目（在清洁下）：

在应用程序中，一旦他们登录，主页就会向他们显示列表（儿童电影和清洁）作为按钮选项。单击列表按钮时，它会向他们显示列表项目（灰姑娘、睡觉、美女和海底总动员等）。在“列表项”页面中，还有一个用于创建列表项的按钮。以前，当它只是 List Items 和 action creator 和 reducer 都非常简单时，我已经完成了所有这些工作。

这是我的主要问题：最好将所有数据放在 Redux 中，并在组件中使用 if 语句来确定是否应该根据记录的 List ID 呈现该记录，或者在 Redux 中按 List ID 嵌套数据（如果这是更好的方法，我需要一些关于 Redux 的帮助）？

我得到了加载列表项的嵌套方法。但是当我尝试创建新的列表项时，我无法让它们显示在列表项页面上，因为我的 Reducer 中的某些内容不正确。

这是动作创建者：

switch (action.type) {
    case FETCH_LIST_ITEMS:
        console.log('Now Reducing');
        console.log(action.payload);
        const listItems = _.mapKeys(action.payload, 'list_item_id');
        console.log(listItems);
        console.log(action.payload[0].list_id);
        ///return { ...state, ..._.mapKeys(..._.mapKeys(action.payload, 'list_item_id'), 'list_id') }; //Not working
        //return { ...state, [action.payload[0].list_id]: listItems }; //works, but listItemList is breaking
        return { ...state, ..._.mapKeys(action.payload, 'list_item_id') }; //orignal
    case FETCH_LIST_ITEM:
        return { ...state, [action.payload.list_item_id]: action.payload };
    case CREATE_LIST_ITEM:
        console.log('Now Reducing CREATE');
        console.log(action.payload);
        //const thisItem = _.mapKeys(action.payload, 'list_item_id');
        //console.log(listItems);
        console.log(action.payload.list_id);
        const myData = { [(action.payload.list_item_id)] :  [(action.payload)] };
        //const myData[action.payload.list_item_id] = action.payload;
        console.log('myData');
        console.log(myData);
        //return { ...state, [action.payload.list_id]: myData };
//the new record doesn't show on the List Items page for the List
        return { ...state, [action.payload.list_id]: _.mapKeys(action.payload, 'list_item_id') };
        //return { ...state, [action.payload.list_item_id]: action.payload }; // original

这是我在组件中的 mapStatetoProps：

const mapStateToProps = (state) => {
    return { 
        listItems: Object.values(state.listItems),
        currentUserData: state.auth.userId,
        currentUserId: state.auth.userId.user_id,
        isSignedIn: state.auth.isSignedIn,
        auth: state.auth
    };
};

Redux 中的嵌套数据结构 Redux 中的非嵌套数据结构

标签： reactjsreact-redux

解决方案

推荐阅读