如何减速添加到反应Redux的应用

问题描述：

setup.js

import catReducer from '../reducers/catReducer'; 

let store; 

const initStore = ({onRehydrationComplete}) => { 
    store = createStore(
    combineReducers({ 
     ...reactDeviseReducers, 
     catReducer, 
     form: formReducer, 
     router: routerReducer, 
     apollo: apolloClient.reducer() 
    }), 
    {}, 
    compose(
     applyMiddleware(
     thunk, 
     routerMiddleware(history), 
     apolloClient.middleware() 
    ), 
     autoRehydrate() 
    ) 
); 

    persistStore(store, { 
    blacklist: [ 
     'form' 
    ] 
    }, onRehydrationComplete); 

    return store; 
};

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

catReducer.js

import * as types from '../actions/actionTypes'; 
import initialState from './initialState'; 

export default function catReducer(state = initialState.cats, action) { 
    switch(action.type) { 
    case types.LOAD_CATS_SUCCESS: 
     return action.cats 
    default: 
     return state; 
    } 
}

的初始化状态

export default { 
    cats: [], 
    hobbies: [] 
}

我的反应组分：CatsPage.js

import React from 'react'; 
import PropTypes from 'prop-types'; 
import {connect} from 'react-redux'; 
import CatList from './CatList'; 
import {loadCats} from '../../actions/catActions'; 

class CatsPage extends React.Component { 
    componentDidMount() { 
    this.props.dispatch(loadCats()) 
    } 
    render() { 
    return (
     <div> 
     <h1>Cats</h1> 
     <div> 
      <CatList cats={this.props.cats} /> 
     </div> 
     </div> 
    ); 
    } 
} 

CatsPage.propTypes = { 
    cats: PropTypes.array.isRequired 
}; 

function mapStateToProps(state, ownProps) { 

    console.log('mapStateToProps') 
    console.log(state) 

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

export default connect(mapStateToProps)(CatsPage);

感谢您的帮助！

最新通报

JS控制台错误W¯¯以上：

warning.js:36 Warning: Failed prop type: The prop `cats` is marked as required in `CatsPage`, but its value is `undefined`. 

Warning: Failed prop type: The prop `cats` is marked as required in `CatList`, but its value is `undefined`. 

CatList.js:8 Uncaught TypeError: Cannot read property 'map' of undefined

这是state.catReducer。 http://www.benmvp.com/learning-es6-enhanced-object-literals/ –

谢谢但在上述哪里？ – AnApprentice

在combineReducers中，您设置了catReducer的关键字。如果你想让猫成为猫：catReducer。 –

答

在你的函数mapStateToProps你试图ASIGN猫state.cats但在你combineReducers功能的物体看起来像 {catReducer: catReducer}。尝试在combineReducers函数变化

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

改变catReducer进入出头像{cats: catReducer}

您是否建议将'catReducer'，'cat'改为'catReducer，'？ – AnApprentice

当我这样做，我得到一个错误，看到上面的评论...谢谢 – AnApprentice

答

到

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

可能做的伎俩为您

改变它'猫：state.cats.cats'确实错误，这是好的，但在结构上，我们不希望猫内的猫， ,,我怎样才能让它只是猫而不是猫>猫？ – AnApprentice

问题在于你在这里使用的联合reducer，这意味着将有一个根reducer是多个reducers的组合，并且你的cats对象不在根reducer中，在这里，你的root reducer是由多个还原剂（猫是其中之一），在平行的世界里，如果你只有一个还原剂，那就是猫还原剂，你可以使用'state.cats'，但是在还原剂进入的地方， 'state'->'rootReducer'->'individualReducer'。希望这是有道理的。 – aditya

答

修改combineReducers通话。请参阅两个代码示例的第3行。

正确

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

你一个将被翻译像

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

谢谢，但是当我在mapStateToProps中输出状态时，我看到有一个cats：object的状态对象，当我打开时打开了一个cat数组。不应该有猫OBJECT> cats Array（0）对不对？ – AnApprentice

不，你正在从你的reducer返回一个数组，所以你会得到一个猫对象的数组。 –

如何减速添加到反应Redux的应用

相关推荐