[英]Redux - Identical reducers, containers, and components are producing different results
edit: Solution was hooking up a different variable to the mapStateToProps. 编辑:解决方案是将另一个变量连接到mapStateToProps。
I'm having some trouble with my react-redux application and I'm not sure what I'm doing wrong. 我的react-redux应用程序遇到了一些麻烦,我不确定自己做错了什么。
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. Alphabetical
动作和减速器似乎正常工作,但与“ Duplicate
逻辑不同,切换“按字母顺序”按钮时,词汇表不会重新呈现。 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. 我创建了
Duplicate
reducer,action,容器,组件,一旦使它们工作,就将代码复制到了Alphabetical
文件中。 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. 除了变量名之外,代码应该相同,但是当我在createStore中分别运行每个reducer时,
duplicates
可以正常工作,而alphabetical
则不能。
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?). 您可以通过在createStore函数中使用
toggleDuplicates
来查看Alphabetical
按钮的行为方式(我仍在弄清楚为什么合并化toggleDuplicates
不起作用-可能与问题有关吗?)。
src/entry.jsx src / entry.jsx
Change allReducers to toggleDuplicates
or toggleAlphabetical
将所有
toggleDuplicates
更改为toggleDuplicates
或toggleAlphabetical
let store = createStore(
allReducers,
initialState,
compose(
applyMiddleware(createLogger())
)
);
To run, cd into the directory, then run npm install
, npm run server
要运行,请cd进入目录,然后运行
npm install
, npm run server
The intended behavior is the Duplicate
and Alphabetize
buttons will update the GlossaryTable with the correct values when toggled. 预期的行为是,“
Duplicate
和“ Alphabetize
按钮在切换时将使用正确的值更新GlossaryTable。 The GlossaryTable
should be rerendered when the visibleWords
state is updated (after being returned by the toggleDuplicates / toggleAlphabetical reducers. 更新
visibleWords
状态时,应重新visibleWords
GlossaryTable
(在由toggleDuplicates / toggleAlphabetical缩减器返回之后)。
src/containers/GlossaryContainer.js src /容器/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;
You are creating a reducer called words
that's not actually a reducer but an array. 您正在创建一个称为
words
的reducer,它实际上不是reducer,而是一个数组。
words
should just be data in your store, not a reducer itself words
应该只是您商店中的数据,而不是reduce本身
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.