Redux-相同的异径管，容器和组件产生不同的结果

Question

编辑：解决方案是将另一个变量连接到mapStateToProps。

我的react-redux应用程序遇到了一些麻烦，我不确定自己做错了什么。

源代码可以在这里找到 。

Alphabetical动作和减速器似乎正常工作，但与“ Duplicate逻辑不同，切换“按字母顺序”按钮时，词汇表不会重新呈现。 我猜这是因为我没有正确地将其连接到存储/调度中。

我创建了Duplicate reducer，action，容器，组件，一旦使它们工作，就将代码复制到了Alphabetical文件中。 除了变量名之外，代码应该相同，但是当我在createStore中分别运行每个reducer时， duplicates可以正常工作，而alphabetical则不能。

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

src / entry.jsx

将所有toggleDuplicates更改为toggleDuplicates或toggleAlphabetical

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

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

预期的行为是，“ Duplicate和“ Alphabetize按钮在切换时将使用正确的值更新GlossaryTable。 更新visibleWords状态时，应重新visibleWords GlossaryTable （在由toggleDuplicates / toggleAlphabetical缩减器返回之后）。

src /容器/GlossaryContainer.js

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

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

const VisibleGlossary = connect(
    mapStateToProps
)(GlossaryTable);

export default VisibleGlossary;

Answer 1

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

words应该只是您商店中的数据，而不是reduce本身