2016-04-24 28 views
0

私はReact/Reduxの世界には初めてですが、私の理解から、レデューサーはアプリケーションのグローバルな状態に追加されます。私はmapStateToPropsがレデューサーを見つけることができません

export default function() { 
    return [ 
    { title: 'Book1' }, 
    { title: 'Book2' }, 
    { title: 'Book3'} 
    ] 
} 

reducers.js

import { combineReducers } from 'redux' 

import booksReducer from './books_reducer' 

const appReducer = combineReducers({ 
    books: booksReducer 
}) 

export default appReducer 

container.js

import React, { Component } from 'react' 
import { connect } from 'react-redux' 

class App extends Component { 
    renderList() { 
    return(
     this.props.books.maps((book) => { 
     return(
      <li key={book.title} className='lsit-group-item'>{book.title}</li> 
     ) 
     }) 
    ) 
    } 

    render() { 
    return(
     <ul className='list-group col-sm-4'> 
     {this.renderList()} 
     </ul> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return(
    books: state.books 
) 
} 

export default connect(mapStateToProps)(App) 

app.js

ReferenceError: books is not defined

books_reducer.jsを得るのに私は私のmapStateToPropsでそれを参照する場合

import React from 'react' 
import ReactDOM from 'react-dom' 
import { Provider } from 'react-redux' 
import { createStore } from 'redux' 

import App from './containers/containers' 
import appReducer from './reducers/reducers' 

let store = createStore(appReducer) 

ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider>, 
    document.getElementById('app') 
) 
+0

レンダリングを行う前に 'console.log(store.getState())'を実行するとどうなりますか? –

答えて

2

mapStateToProps機能に構文エラーがあるようです。

function mapStateToProps(state) { 
    return(
    books: state.books 
) 
} 

おそらくオブジェクトリテラルを返すことを意図していました。

function mapStateToProps(state) { 
    return { 
    books: state.books 
    }; 
} 
+0

申し訳ありません私はすでに店舗を作成しています。なぜ私はそれを含まなかったのか分からない。更新された質問 –

関連する問題