Question

我之前的React-Redux实现正在运行，但在我尝试使用分离文件实现combineReducer函数之后，抛出了一个我不太懂的错误。希望你们中的一些人可以帮助我！

错误：未捕获的TypeError：this.props.todos.map不是函数

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

我要展示的第一个代码就是我（工作）：

的MyStore

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
}

我的减速机

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

    }
 }

操作

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

最终呈现输入的subComponent

 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状态，你会发现以下代码在状态（addItem和getItem）中设置了另外两个键：

const rootReducer = combineReducers({
   addItem,
   getItem
 })

所以，现在要连接todos，您需要两个新密钥之一。如果未在todos上定义todos，则需要将combineReducers的缩减器添加到const mapStateToProp = state => ({todos: state})调用。

所以这需要映射到州的有效位置：

{{1}}

使用CombineReducer

1 个答案: