React+Redux+Webpack项目加载静态数据到Redux Store报错求助

嘿，我仔细看了你的代码，发现了一个很关键的语法问题，这大概率就是你加载数据到Redux Store失败的原因！

核心错误点 #

你在定义pages1、pages2、pages3这些数组的时候，元素用了对象的大括号{}，但里面却没有写键值对，而是直接罗列值：

// 错误写法
var pages1 = [
  {'1', 'slide1SubHeading1', ['point1', 'point2', 'point3']},
  {'2', 'slide1SubHeading2', ['point1', 'point2', 'point3']}
];

JavaScript里的对象必须是{键名: 值}的结构，你这种只放值的写法会让JS引擎无法解析，直接抛出语法错误，后续的store.dispatch自然也没法正常执行。

修复后的代码 #

把这些数组元素改成合法的键值对结构就行，你可以根据数据的含义给每个值配上对应的键，比如：

// 正确写法
var pages1 = [
  {id: '1', subHeading: 'slide1SubHeading1', points: ['point1', 'point2', 'point3']},
  {id: '2', subHeading: 'slide1SubHeading2', points: ['point1', 'point2', 'point3']}
];

var pages2 = [
  {id: '1', subHeading: 'slide2SubHeading1', points: ['point1', 'point2', 'point3']},
  {id: '2', subHeading: 'slide2SubHeading2', points: ['point1', 'point2', 'point3']}
];

var pages3 = [
  {id: '1', subHeading: 'slide3SubHeading1', points: ['point1', 'point2', 'point3']},
  {id: '2', subHeading: 'slide3SubHeading2', points: ['point1', 'point2', 'point3']}
];

键名可以根据你Redux reducer里处理的字段来调整，只要保证是合法的对象结构就好。

后续排查建议 #

1. 修复语法错误后，运行项目时打开浏览器控制台（按F12），看看还有没有其他错误提示——如果还有问题，控制台的错误信息会帮你快速定位。
2. 确认你的addSlide action creator和对应的reducer能正确处理这种键值对形式的pages数据，确保store能正确接收并存储这些静态数据。

内容的提问来源于stack exchange，提问作者Tushar