私はデフォルトで空の配列として設定していても、なぜ私の状態が悪いのですか？

Question

私が持っているが、私は、デフォルトでは空の配列としての状態を設定している私のサイドバーコンポーネント

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { connect } from 'react-redux'; 
import { addDeck, showAddDeck, hideAddDeck } from '../actions'; 

const mapStateToProps = ({decks, addingDeck}) => ({ 
    decks, 
    addingDeck 
}); 

const mapDispatchToProps = dispatch => ({ 
    addDeck: name => dispatch(addDeck(name)), 
    showAddDeck:() => dispatch(showAddDeck()), 
    hideAddDeck:() => dispatch(hideAddDeck()) 
}); 

class Sidebar extends React.Component { 
    constructor(props) { 
    super(props); 
    this.createDeck = this.createDeck.bind(this); 
    } 
    componentDidUpdate() { 
    var el = ReactDOM.findDOMNode(this.refs.add); 
    if (el) el.focus(); 
    } 
    render() { 
    let props = this.props; 
    return (
     <div className='sidebar'> 
     <h2> All Decks </h2> 
     <button onClick={ e => this.props.showAddDeck() }> 
      New Decks 
     </button> 
     <ul> 
      {props.decks.map((deck, i) => 
      <li key={i}> {deck.name} </li> 
      )} 
     </ul> 
     {props.addingDeck && <input ref='add' onKeyPress={this.createDeck} />} 
     </div>); 
    } 
    createDeck(evt) { 
    const ENTER = 13; 
    if (evt.which !== ENTER) return; 
    var name = ReactDOM.findDOMNode(this.refs.add).value; 
    this.props.addDeck(name); 
    this.props.hideAddDeck(); 
    } 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(Sidebar); 

のライン

{props.decks.map((deck, i) => 

にエラー「未定義のプロパティ 『マップ』を読み取ることができません」 reducers.js

に私は私のprops.decksがunderfinedされている理由

はそれがES6で何かであることを理解できないのですか？ここで

export const decks = (state, action) => { 
    switch (action.type) { 
    case 'ADD_DECK': 
     let newDeck = { name: action.data, id: +new Date }; 
     return state.concat([newDeck]); 
    default: 
     return state || []; 
    } 
}; 

は私のindex.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { createStore, combineReducers } from 'redux'; 
import { Provider } from 'react-redux'; 
import { Router, Route, browserHistory } from 'react-router'; 
import { syncHistoryWithStore, routerReducer, ConnectedRouter } from 'react-router-redux'; 
import * as reducers from './reducers'; 
import './index.css'; 
import App from './components/App'; 


const store = createStore(combineReducers({reducers, 
    routing: routerReducer})); 
const history = syncHistoryWithStore(browserHistory, store); 

function run() { 
    let state = store.getState(); 
    ReactDOM.render(
    <Provider store={store}> 
     <Router history={history}> 
     <Route path='/' component={App}></Route> 
     </Router> 
    </Provider>, document.getElementById('root')); 
} 

run(); 
store.subscribe(run); 

とApp.js

import React from 'react'; 
import Sidebar from './Sidebar'; 

const App = (props) => { 
    return (
    <div className='app'> 
     <Sidebar /> 
     { props.children } 
    </div>); 
}; 

export default App; 

とpackage.json

{ 
    "name": "flashcard-app-3", 
    "version": "0.1.0", 
    "private": true, 
    "dependencies": { 
    "babel-core": "^6.26.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babelify": "^8.0.0", 
    "fuzzysearch": "^1.0.3", 
    "history": "^4.7.2", 
    "live-server": "^1.2.0", 
    "prop-types": "^15.6.0", 
    "react": "^15.0.0", 
    "react-dom": "^15.0.0", 
    "react-redux": "^4.4.1", 
    "react-router": "^2.0.1", 
    "react-router-dom": "^4.2.2", 
    "react-router-redux": "^4.0.1", 
    "redux": "^3.3.1", 
    "watchify": "^3.9.0", 
    "react-scripts": "1.0.17" 
    }, 
    "scripts": { 
    "start": "set PORT=3001 && react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
} 

Answer 1

作成したラインで問題となっています店舗。あなたはstate.decks経由状態でデッキにアクセスしたい場合は、

combineReducers({ routing: routerReducer, ...reducers }) 

reducersの性質はあなたがcombineReducersに渡すオブジェクトに追加されます。この方法を使用する必要があります。それ以外の場合は、state.reducers.decksのように状態にアクセスする必要があります。

詳細については、MDNを参照してください。