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本身