mapStateToProps找不到reducer

时间:2016-04-24 13:13:15

标签: reactjs redux

我是React / Redux世界的新手,但根据我的理解,reducer会被添加到应用程序的全局状态。当我在mapStateToProps中引用它时虽然我得到ReferenceError: books is not defined

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

1 个答案:

答案 0 :(得分:3)

您的mapStateToProps函数可能会出现语法错误。

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

你可能想要返回一个对象文字。

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