Question

我有以下商店：

＆＃xA;＆＃xA;

setup.js

＆＃xA;＆＃xA;

 < code> import catReducer来自'../reducers/catReducer';

let store;＆＃xA;＆＃xA; const initStore =（{onRehydrationComplete}）=＆gt; {＆＃XA; store = createStore（＆＃xA; combineReducers（{＆＃xA; ... reactDeviseReducers，＆＃xA; catReducer，＆＃xA; form：formReducer，＆＃xA; router：routerReducer，＆＃xA; apollo：apolloClient。 reducer（）＆＃xA;}），＆＃xA; {}，＆＃xA;撰写（＆＃xA; applyMiddleware（＆＃xA; thunk，＆＃xA; routerMiddleware（history），＆＃xA; apolloClient。 middleware（）＆＃xA;），＆＃xA; autoRehydrate（）＆＃xA;）＆＃xA;）;＆＃xA;＆＃xA; persistStore（store，{＆＃xA; blacklist：[＆＃xA;'form'＆＃xA;]＆＃xA;}，onRehydrationComplete）;＆＃xA;＆＃xA;返回商店;＆＃xA;};＆＃xA;

＆＃xA;＆＃xA;

我正在尝试添加reducer catReducer 以上。当 catReducer 不存在时，一切正常，当我添加 catReducer 并稍后在组件中记录 state 时，catReducer未按预期显示商店。我做错了什么？

＆＃xA;＆＃xA;

catReducer.js

＆＃xA;＆＃xA;

  import *作为'../actions/actionTypes'的类型;＆＃xA;从'./initialState';＆＃xA;＆＃xA; export默认函数catReducer（state = initialState.cats，action）{＆＃的初始状态XA; switch（action.type）{＆＃xA; case types.LOAD_CATS_SUCCESS：＆＃xA; return action.cats＆＃xA;默认：＆＃XA;返回状态;＆＃xA; }＆＃XA;}＆＃XA;

＆＃XA;＆＃XA;  的初始化状态 
＆＃XA;＆＃XA; < pre>  export default {＆＃xA;猫：[]，＆＃xA;爱好：[]＆＃xA;}＆＃xA;  ＆＃xA;＆＃xA;  我的反应组件：CatsPage.js  
 ＆＃xA;＆＃xA;   import来自'react'的反应;＆＃xA;从'prop-types'导入PropTypes;＆＃xA;从'react-redux'导入{connect}; && #xA;从'./CatList'中引导CatList;＆＃xA;从'../../actions/catActions'中取出{loadCats};＆＃xA;＆＃xA;类CatsPage扩展了React.Component {＆＃ XA; componentDidMount（）{＆＃xA; this.props.dispatch（loadCats（））＆＃XA; }＆＃XA; render（）{＆＃xA;返回（＆＃xA;＆lt; div＆gt;＆＃xA;＆lt; h1＆gt; Cats＆lt; / h1＆gt;＆＃xA;＆lt; div＆gt;＆＃xA;＆lt; CatList cats = {this.props.cats} /＆gt; ＆＃xA;＆lt; / div＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;）;＆＃xA; }＆＃xA;}＆＃xA;＆＃xA; CatsPage.propTypes = {＆＃xA; cats：PropTypes.array.isRequired＆＃xA;};＆＃xA;＆＃xA; function mapStateToProps（state，ownProps）{＆＃xA;＆＃xA;的console.log（ 'mapStateToProps'）＆＃XA;的console.log（状态）＆＃XA;＆＃XA;返回{＆＃xA;猫：state.cats＆＃xA; //猫：[{id：1，名字：“Maru”}]＆＃xA; } && xA;}＆＃xA;＆＃xA;导出默认连接（mapStateToProps）（CatsPage）;＆＃xA;  
＆＃xA;＆＃xA; 谢谢任何帮助！
＆＃xA;＆＃xA;  更新 
＆＃xA;＆＃xA;   js控制台错误以上： 
＆＃xA;＆＃xA;   warning.js：36警告：失败的道具类型：道具`cats`在`CatsPage`中被标记为必需，但是value是'undefined`。＆＃xA;＆＃xA;警告：失败的道具类型：道具`cats`在`CatList`中被标记为必需，但它的值是'undefined`。＆＃xA;＆＃xA; CatList.js：8未捕获的TypeError：无法读取未定义的属性'map'＆＃xA;  ＆＃xA;

Answer 1

在您的函数android.database.sqlite中，您尝试将猫与mapStateToProps对齐，但在您的state.cats函数中，您的对象看起来像 combineReducers。尝试将您的{catReducer: catReducer}功能更改为combineReducers条目，例如catReducer

Answer 2

修改您的combineReducers来电。请参见两个代码示例的第3行。

纠正一个

combineReducers({ ...reactDeviseReducers, cats: catReducer, form: formReducer, router: routerReducer, apollo: apolloClient.reducer() })

您的One将被翻译为

combineReducers({ ...reactDeviseReducers, catReducer: catReducer, form: formReducer, router: routerReducer, apollo: apolloClient.reducer() })

Answer 3

更改

 return {
    cats: state.cats
    //cats: [{id:1, name: "Maru"}]
  };

到

  return {
    cats: state.catReducer.cats
    //cats: [{id:1, name: "Maru"}]
  };

可能会为你做到这一点

如何将reducer添加到react redux应用程序中

3 个答案: