reactjs - combineReducers() 在 React Redux 中不起作用

Question

这是我的商店代码

import { combineReducers, createStore } from "redux";
 
import counterReducer from "./../Counter/counter.reducer";
const rootReducer = combineReducers({ first: counterReducer });
 
const store = createStore(rootReducer);

export default store;

和组件：

const Sid = () => {
  const num = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <div>
      <h1>Count value is {num}</h1>
      
      <button onClick={() => dispatch(increaseCounter())}>Add 5 </button>
      <button onClick={() => dispatch(decreaseCounter())}>Subtract 50</button>
    </div>
   
  );
}; 

输出：

代码工作正常如果我不使用组合减速器并直接在createStore() function

请帮我解决这个问题。在此先感谢您的帮助。

标签： reactjsreduxreact-redux

Answer 1

当你使用 时combineRreducers，你的 store 对象将与你传入的对象具有相同的键，并以 reducer 返回值作为值。

所以在你的情况下，商店应该是这样的

{
  first: {
    counter: 0
  }
} 

问题是您尝试从state.counter选择器中读取值而不是state.first.counter

只需将您的选择器更改为

const num = useSelector(state => state.first.counter);