はどのように反応するReduxのアプリ

Question

に減速を追加するにはI次のストアがあります。

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); 

助けてくれてありがとう！

UPDATES

JS上記ワットコンソールのエラーを：あなたの関数で

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 

Answer 1

mapStateToPropsあなたはstate.catsに猫をasignしようとしましたが、あなたのcombineReducers機能であなたのオブジェクトが {catReducer: catReducer}のように見えます。

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

に

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

を変更すると、あなた

Answer 2

などの代にcatReducerエントリを変更してください。両方のコードサンプルの3行目を参照してください。

正しいもの

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

あなたの一つは、それがstate.catReducerだ

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

Answer 3

があなたのcombineReducers呼び出しを変更するためのトリックを行う可能性がありますあなたのcombineReducers機能に{cats: catReducer}