Redux - Identical reducers, containers, and components are producing different results

Question

edit: Solution was hooking up a different variable to the mapStateToProps.

I'm having some trouble with my react-redux application and I'm not sure what I'm doing wrong.

The source code can be found here .

The Alphabetical action and reducer seem to the working correctly, but unlike the Duplicate logic, the glossary doesn't rerender when the Alphabetical buttons are toggled. I'm guessing this is because I haven't hooked it into the store / dispatch correctly.

I created the Duplicate reducer, action, containers, components, and once I got those working, I copied the code to the Alphabetical files. Aside from the variable names, the code should be identical, but when I run each reducer individually in the createStore, duplicates is working correctly and alphabetical is not.

You can see how the Alphabetical buttons should behave by using toggleDuplicates in the createStore function (I'm still figuring out why combining the reducers isn't working - maybe this is related to the problem?).

src/entry.jsx

Change allReducers to toggleDuplicates or toggleAlphabetical

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

To run, cd into the directory, then run npm install , npm run server

The intended behavior is the Duplicate and Alphabetize buttons will update the GlossaryTable with the correct values when toggled. The GlossaryTable should be rerendered when the visibleWords state is updated (after being returned by the toggleDuplicates / toggleAlphabetical reducers.

src/containers/GlossaryContainer.js

This is where I think I may not correctly be wiring up the state to the dispatch.

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

const VisibleGlossary = connect(
    mapStateToProps
)(GlossaryTable);

export default VisibleGlossary;

Answer 1

You are creating a reducer called words that's not actually a reducer but an array.

words should just be data in your store, not a reducer itself