Redux - 相同的 reducer、容器和组件产生不同的结果答案

【问题标题】：Redux - Identical reducers, containers, and components are producing different resultsRedux - 相同的 reducer、容器和组件产生不同的结果
【发布时间】：2017-05-11 18:39:02
【问题描述】：

编辑：解决方案是将不同的变量连接到 mapStateToProps。

我的 react-redux 应用程序出现问题，我不确定自己做错了什么。

源码可以是found here。

Alphabetical 动作和 reducer 似乎工作正常，但与 Duplicate 逻辑不同，当切换按字母顺序的按钮时，词汇表不会重新呈现。我猜这是因为我没有将它正确连接到商店/调度中。

我创建了Duplicate reducer、action、containers、components，一旦我开始工作，我将代码复制到Alphabetical 文件中。除了变量名之外，代码应该是相同的，但是当我在 createStore 中单独运行每个 reducer 时，duplicates 工作正常，alphabetical 工作不正常。

您可以通过在 createStore 函数中使用 toggleDuplicates 来查看 Alphabetical 按钮的行为方式（我仍在弄清楚为什么组合减速器不起作用 - 也许这与问题有关？）。

src/entry.jsx

将 allReducers 更改为 toggleDuplicates 或 toggleAlphabetical

let store = createStore(
    allReducers,
    initialState,
    compose(
        applyMiddleware(createLogger())
    )
);

要运行，cd进入目录，然后运行npm install，npm run server

预期行为是Duplicate 和Alphabetize 按钮在切换时将使用正确的值更新 GlossaryTable。 GlossaryTable 应该在 visibleWords 状态更新时重新渲染（在由 toggleDuplicates / toggleAlphabetical reducer 返回之后。

src/containers/GlossaryContainer.js

这是我认为我可能没有正确地将状态连接到调度的地方。

const mapStateToProps = (state) => ({
  visibleWords: getVisibleEntries(
      state.words,
      state.visibleWords,
      state.toggleDuplicates,
      state.toggleAlphabetical
  )
});

const VisibleGlossary = connect(
    mapStateToProps
)(GlossaryTable);

export default VisibleGlossary;

【问题讨论】：

在创建 store 时避免使用 initialState，只需在 reducer 中传递即可。

标签： javascript reactjs redux react-redux

【解决方案1】：

您正在创建一个名为words 的reducer，它实际上不是一个reducer，而是一个数组。

words 应该只是存储中的数据，而不是 reducer 本身

【讨论】：