2017-01-20 10 views
2

reduxとtypescriptでストアを作成する際に問題があります。これはactions.jsです:文字列:TypeScript + Reduxでレデューサー付きストアを作成できません

import { Action } from 'redux'; 

export interface ITodoAction extends Action { 
    todo:string; 
} 

export const ADD_TODO:string = 'ADD_TODO'; 
export function addTodo(todo:string):ITodoAction { 
    return { 
     type: ADD_TODO, 
     todo 
    }; 
} 

私はITodoAction、私のカスタムプロパティTODOの拡張アクションという名前のカスタムアクションのためのインタフェースを輸出しました。

これはreducers.jsです:

import { Reducer } from 'redux'; 
import { ITodo } from '../interfaces'; 
import { ITodoAction, ADD_TODO } from '../actions'; 

let id:number = 0; 
const generateId =():number => id++; 

interface ITodoState { 
    todos:Array<ITodo> 
}; 

const defaultState:ITodoState = { 
    todos: [] 
}; 

export function todoReducer(state:ITodoState = defaultState, action:ITodoAction):ITodoState { 
    switch(action.type) { 
     case ADD_TODO: 
      return Object.assign({}, state, { 
       todos: [ 
        { id: generateId(), text: action.todo, completed: false }, 
        ...state.todos 
       ] 
      }); 
     default: 
      return state; 
    } 
} 

私は以前からITodoActionを使用は、モミの定義todoReducerをactions.js。

{ 
    type: 'ADD_TODO', 
    todos: [ ITodo{}, ITodo{}, ITodo{}, ... ] 
} 

そして、これは私が使用したITodoインターフェイスです:

export interface ITodo { 
    id:number; 
    todo:string; 
    completed:boolean; 
} 

それはIDが含まれている単なるオブジェクト、テキスト、完成todoReducerは次のようになります戻りITodoStateインスタンスは、意志。私はそれが罰金だと思うが、私はこのような減速とストアを作成しようとしたとき:それはで失敗

import { createStore } from 'redux'; 
import todoReducer from './reducers'; 

export const store = createStore(todoReducer); 

:私は私の減速を修正するために持っているよう

Argument of type 'typeof "/.../typescript-todo/src/ts/reducers/index"' is not assignable to parameter of type 'Reducer<{}>'... 
Type 'typeof "/./typescript-todo/src/ts/reducers/index"' provides no match for the signature '&lt;A extends Action&gt;(state: {}, action: A): {}' 

が見えるが、私はしませんでしたReducer < {} >で減速機を定義する方法を得て、 "blablablaはblablablaに割り当てられない"のような同様のメッセージで失敗した。

私は単純な減速機を使っていますが、どうしてできないのですか? これは、どちらかの種類のReducerMapや何かを使う必要があったときに、combineReducerと一緒に働かないでしょう。現実のインターフェースが何かを覚えていません。

私はtypescriptです+ Reduxの関連記事をたくさん見つけましたが、何かのように、彼らはちょうど彼らが自分のアクションと減速を定義している使用し、それらは減速< {} >またはアクション> T <を使用していなかったが、これらは単に作られていますなぜ私はReducerとActionインターフェースを使用しなかったのですか、それがなぜ機能したのですか?

どういうわけか、私はReduxのの型宣言を発見し、これは次のように減速<は{} >がどのように見えるかである:返す関数であり、Iは減速< {} >で理解できるように、できるだけ

export type Reducer<S> = <A extends Action>(state: S, action: A) => S; 

状態。それで私のtodoReducerがなぜ彼らと一緒に働かなかったのですか?私はReducerを試しました<ITodoState>、しかしそれは働かないでしょう。

私は今、本当に混乱しています。私は大きなものを見逃しているように見えますが、うわー、私は本当にそれが分からないのです。 TypeScriptでReduxを使うのは難しいとは思っていませんでした。

私はベストを尽くしましたが、手が必要なように見えます。どんなアドバイスも非常に感謝しています。

+0

私は同じ問題を抱えています。解決策は見つかりましたか? –

+0

@ erik-sn実際にはい、エクスポート機能todoReducerをデフォルト機能todoReducerをエクスポートするように変更するだけです。 – modernator

答えて

1

デフォルトではレデューサーがエクスポートされ、機能しました。

関連する問題