combineReducers()在React Redux中不工作

oknrviil 于 11个月前发布在 React

关注(0)|答案(3)|浏览(93)

这是我的商店代码

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
请帮我解决这个问题。提前感谢您的帮助。

redux

来源：https://stackoverflow.com/questions/67815290/combinereducers-not-working-in-react-redux

3条答案

按热度按时间

brqmpdu11#

当你使用combineRreducers时，你的store对象将与你传入的对象具有相同的键，并将reducer返回值作为值。
所以在你的例子中，商店应该是这样的

{
  first: {
    counter: 0
  }
}

字符串
问题是你试图在选择器中从state.counter而不是state.first.counter中读取值
只需将选择器更改为

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

型

赞(0）回复(0）举报 11个月前

hmtdttj42#

一条建议：写每一行代码都要有目的。
根据official documentation，combineReducers用于下面提到的场景。
随着你的应用变得越来越复杂，你会希望将reducing函数拆分为单独的函数，每个函数管理状态的独立部分。
你只有一个减速器，那么就不需要合并减速器了。只要简单地按下面的方法传递你的减速器就可以了。

import { createStore } from "redux";
import counterReducer from "./../Counter/counter.reducer";

const store = createStore(counterReducer); // Just pass `counterReducer` directly

export default store;

字符串
让我知道如果你需要进一步的支持。

赞(0）回复(0）举报 11个月前

s2j5cfk03#

下面是对这个问题的一个稍微精炼的回答：

**方法一：**如果是connect方法，将stateMap到props，将propsMap到dispatch，则需要在访问state值时添加key名称。
方法二：如果您也使用useHook，则同样适用。

代码如下：
问题所示的例子所需的更改是

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

字符串
如果您使用方法1，则需要进行以下更改

const mapStateToProps = (state) => {
return {
    counter: state.first.numOfCakes,
  };
}

型

赞(0）回复(0）举报 11个月前

我来回答

combineReducers()在React Redux中不工作

3条答案

相关问题

热门标签

最新问答