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

Question

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

我的react-redux应用程序遇到了一些问题，我不确定我做错了什么。

源代码可以是found here .

按字母顺序操作和缩减器似乎工作正常，但与复制逻辑不同，当切换按字母顺序按钮时，术语表不会重新呈现。我猜这是因为我没有正确地将其连接到商店/调度中。

我创建了Duplicate reducer 、操作、容器、组件，一旦我让这些工作起来，我将代码复制到Alphabetical文件中。除了变量名称之外，代码应该是相同的，但是当我在 createStore 中单独运行每个 reducer 时，duplicates 工作正常，而 alphabetical 则不然。

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

src/entry.jsx

将 allReducers 更改为 toggleDuplicates 或 toggleAlphabetical

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

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

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

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;

Answer 1

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

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