javascript - 使用 CombineReducer 后无法访问 Prop

Question

我之前的 React-Redux 实现工作正常，但在我尝试使用单独的文件实现 combineReducer 函数后，抛出了一个我不太明白的错误。希望你们中的一些人能帮助我!

错误:未捕获的类型错误:this.props.todos.map 不是一个函数

我对该代码的引用是 Redux-Doc 的异步示例。但是我用另一个例子说明了每个例子的变化都没有记录在文档中。

我将展示的第一个代码是我有(工作):

我的商店

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
import addItem from '../reducers/addItem'

export default function configureStore(preloadedState) {
   const store = createStore(
    addItem,
    preloadedState,
    applyMiddleware(thunkMiddleware, createLogger())
)

if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
        const nextRootReducer = require('../reducers').default
        store.replaceReducer(nextRootReducer)
   })
}

    return store
}

我的 reducer

export default (state = ['Test'], action) => {
    switch (action.type){
       case 'ADD_ITEM':
        //return action.item
        return [
            ...state,
            {
                id: action.id,
                text: action.item
            }
        ]
    default:
        return state

    }
 }

Action

export default function addItem(item){
   console.log("addTOdo")
   return {
    type: 'ADD_ITEM',
    id: nextTodoId++,
    item
   }
 }

以及最终呈现输入的子组件

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

 export default class TodoList extends Component {

render() {
    const posts = this.props
    const isEmpty = posts.length === 0
    return (

        <div>
            <h3>Meine Aufgaben</h3>
            <ul>
                {isEmpty
                    ? <h3>Sie haben noch keinen Todo´s angelegt</h3>
                    : <h3>Ihre Ergebnisse</h3>
                }
                {this.props.todos.map((todo, i) => <li key={i}>{todo.text}       </li>)}
            </ul>
        </div>
        )
      }
  }
  const mapStateToProp = state => ({todos: state})

  export default connect (mapStateToProp)(TodoList)

我有什么变化:

首先，我创建了另一个名为 Index 的 Reducers 文件，我在其中导入了 addItem Reducer 并导出了 rootReducer:

import {combineReducers} from 'redux'
import addItem from './addItem'
import getItem from './getItem'

const rootReducer = combineReducers({
   addItem,
   getItem
 })

 export default rootReducer

之后，我更改了 Store 以导入 rootReducer 并将其引用放在 Store 中(只是对 configureStore 的更改):

import rootReducer from '../reducers/index'

 const store = createStore(
    rootReducer,
    preloadedState,
    applyMiddleware(thunkMiddleware, createLogger())
)

我不知道是否也需要该信息，但这是我的容器组件:

import React, { Component, PropTypes } from 'react'
import AddTodo from '../components/AddTodo'
import TodoList from '../components/TodoList'
import { connect } from 'react-redux'
import addItem from '../actions/addItem'
import getItems from '../actions/getItems'

class App extends Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.state = {text: ''}
}

handleClick(e){
    console.log(e);
    const {dispatch} = this.props
    dispatch(addItem(e));
}

componentDidMount(){
    console.log("COMPONENT MOUNT");
    const {dispatch} = this.props
  //  dispatch(getItems())
}

componentWillReceiveProps(nextProps) {
    console.log("GETTT IT");
    console.log(nextProps)
}

render() {

    return (
        <div>
        < h1 > Hallo </h1>
            <AddTodo handleAddItem={this.handleClick}/>
            <TodoList/>
        </div>
    )
  }
}

App.propTypes = {
    dispatch: PropTypes.func.isRequired
}

function mapStateToProps(state){
  return {
    AddTodo
 }
}

export default connect (mapStateToProps)(App)

我希望这个问题不是很基础，有人可以帮助我。提前致谢!

Answer 1

如果您检查 redux 状态，您会看到以下代码在状态中设置了另外 2 个键(addItem 和 getItem):

const rootReducer = combineReducers({
   addItem,
   getItem
 })

因此，现在要连接 todos，您需要使用 2 个新键之一。如果 todos 没有在那些上定义，那么您需要将 todos 的 reducer 添加到 combineReducers 调用中。

所以这需要映射到状态中的有效位置:

const mapStateToProp = state => ({todos: state})