Redux 状态返回多个同名对象，一个在另一个里面答案

【问题标题】：Redux state returns multiple objects of the same name, one inside the otherRedux 状态返回多个同名对象，一个在另一个里面
【发布时间】：2022-10-08 03:14:41
【问题描述】：

我正在研究 redux，我设法在我的应用程序中调用了减速器的状态。但是，共享状态内部有几个同名的对象，直到我到达我想要的数组，这是一条非常奇怪的路径：course.course.course.modules?.map我不明白为什么，我也不知道如何解决它。

减速机 ->

course.js

const INITIAL_STATE = {

  modules: [
    {
      id: 1,
      title: "Iniciando com react",
      lessons: [
        { id: 1, title: "video01" },
        { id: 2, title: "video02" },
        { id: 3, title: "video03" },
        { id: 4, title: "video04" }
      ]
    },
    {
      id: 2,
      title: "Aprendendo react",
      lessons: [
        { id: 1, title: "video01" },
        { id: 2, title: "video02" },
        { id: 3, title: "video03" },
        { id: 4, title: "video04" }
      ]
    }
  ]

};

export const course = (state = INITIAL_STATE, action) => state;

index.js

import { combineReducers } from 'redux';
import { course } from './course';

export const Reducers = combineReducers({
  course
});

商店 -> index.js

import { createStore } from 'redux';
import { Reducers } from '../reducers';

export const Store = createStore(Reducers);

组件 ->

视频边栏

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';

function VideoSideBar(course) {
  console.log(course);
  return (
    <aside>
      {
        course.course.course.modules?.map(module => (
          <div key={module.id}>
            <strong>{module.title}</strong>
            <ul>
              {
                module.lessons?.map(leassons => (
                  <li key={leassons.id}>{leassons.title}</li>
                ))
              }
            </ul>
          </div>
        ))
      }
    </aside>
  );
}

export default connect(state => ({ course: state }))(VideoSideBar);

【问题讨论】：

标签： react-redux

【解决方案1】：

如果我理解正确，请让你的减速器状态为一个空数组，而你将你的减速器而不是数组内的对象组合起来，因为如果你组合并且你让你的初始状态成为一个初始状态：{course:[]}，它会是当然：

使用 Redux-ToolKit sliceCreator 的代码示例

// Slice if you dont want object show multiple time :

let lastId = 0;
const projectslice = createSlice({
  name: 'Projects',
  initialState:[],
  reducers: {
    PROJECT_ADDED: (projects, action) => {
      projects.push({ id: ++lastId, name: action.payload });
    },
  },
});
export const { PROJECT_ADDED } = projectslice.actions;
export default projectslice.reducer;

如果您希望项目显示嵌套，那么您可以这样做：

// Slice
let lastId = 0;
const projectslice = createSlice({
  name: 'Projects',
  initialState:{projects:[]},
  reducers: {
    PROJECT_ADDED: (projects, action) => {
      projects.push({ id: ++lastId, name: action.payload });
    },
  },
});
export const { PROJECT_ADDED } = projectslice.actions;
export default projectslice.reducer;

【讨论】：