2017-07-02 7 views
1

私は非常に単純なToDoリストをReduxとReactで作っています。私はToDo項目を追加しようとすると "Uncaught ReferenceError:型が定義されていません"というメッセージが表示されます。私はいくつかのことを試しました、ここに私の現在のコードです。私が間違っていることは何ですか?ありがとうございました!ここでReact/Reduxで「Uncaught ReferenceError:type is not defined」エラーが表示されますか?

は私のコンテナです。ここ

import React, {Component} from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { addTodo } from '../actions/index'; 

class Todos extends Component { 
    constructor(props) { 
     super(props); 
     this.state = {text: ''}; 
    } 

    addTodo(e) { 
     e.preventDefault(); 
     this.props.addTodo(this.state.text); 
     this.setState({ 
      text: '' 
     }); 
    } 

    updateValue(e) { 
     this.setState({text: e.target.value}) 
    } 

    render() { 
     return (
      <div> 
       <form onSubmit={(e) => this.addTodo(e)}> 
        <input 
         placeholder="Add Todo" 
         value={this.state.text} 
         onChange={(e) => { 
          this.updateValue(e) 
         }} 
        /> 
        <button type="submit">Add Todo</button> 
       </form> 
       <ul> 
        { this.props.todo.map((item) => { 
         return <li key={item.id}>{ item.message }</li> 
        })} 
       </ul> 
      </div> 
     ); 
    } 
} 

function mapStateToProps({ todo }) { 
    return { todo } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({addTodo}, dispatch); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Todos); 

は減速です:

import { ADD_TODO } from '../actions/types'; 

export default function(state=[], action) { 
    switch(action.type) { 
     case ADD_TODO: 
      return [ action.payload.message, ...state ] 
    } 
    return state; 
} 

そして

import { combineReducers } from 'redux'; 
import TodosReducer from './reducer_addTodo'; 

const rootReducer = combineReducers({ 
    todo: TodosReducer 
}); 

export default rootReducer; 

とアクションを../reducers/index.js:

import { ADD_TODO } from './types'; 
const uid =() => Math.random().toString(34).slice(2); 

export function addTodo(message) { 
    const action = { 
     id: uid(), 
     message: message 
    }; 
    return(
     type: ADD_TODO, 
     payload: action 
    ) 
} 

藤堂項目を追加しようとすると、私は次のエラーを取得する:

Uncaught ReferenceError: type is not defined 
    at addTodo (bundle.js:21950) 
    at Object.addTodo (bundle.js:21166) 
    at Todos.addTodo (bundle.js:23541) 
    at onSubmit (bundle.js:23562) 
    at Object.ReactErrorUtils.invokeGuardedCallback (bundle.js:4532) 
    at executeDispatch (bundle.js:4332) 
    at Object.executeDispatchesInOrder (bundle.js:4355) 
    at executeDispatchesAndRelease (bundle.js:3785) 
    at executeDispatchesAndReleaseTopLevel (bundle.js:3796) 
    at Array.forEach (<anonymous>) 

編集:ここでは

がtypes.jsファイルです:

export const ADD_TODO = 'ADD_TODO'; 
+0

中括弧と括弧を交換し、私は今だけADD_TODOを持っていることを、types.jsファイルを追加しました。 – userden

+0

あなたの問題を私の答えで解決しようとしましたか? –

答えて

2

私が主な理由だと思いますエラーの原因は、addTodo関数のタイプミスによるものです。

export function addTodo(message) { 
    const action = { 
     id: uid(), 
     message: message 
    }; 
    return { 
     type: ADD_TODO, 
     payload: action 
    }; 
} 
+0

それは、エラーを修正しました、ありがとう!システムが私に許してくれたとき、私はあなたの答えを5分で受け入れます。私はまだ私のトドゥー項目を見ていない、私は間違って何をしているのだろうかと思う。 – userden

+1

@Suomiあなたは別の質問を作成することができ、私はそれに答えようとします。 –

+0

ありがとう@D-reaper、私はここで質問をしましたhttps://stackoverflow.com/questions/44872537/cant-get-todo-items-to-show-up-redux-react – userden

関連する問題