2016-04-24 85 views
0

我是React/Redux世界的新手,但從我的理解中,reducer被添加到應用程序的全局狀態。當我引用它在我的mapStateToProps雖然我得到一個ReferenceError: books is not definedmapStateToProps找不到縮小器

books_reducer.js

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

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

對不起,我已經創建了商店。不知道爲什麼我不包括這一點。更新的問題 –