2017-01-20 5 views
2

Ich habe Probleme mit dem Erstellen von Geschäft mit Redux und Typoskript. Dies ist actions.js:Kann Store mit Reduzierer in TypeScript + Redux nicht erstellen

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 
    }; 
} 

I-Schnittstelle für benutzerdefinierte Aktion mit dem Namen ITodoAction, erweiterte Aktion für meine benutzerdefinierte Eigenschaft todo exportiert: string.

Dies ist 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; 
    } 
} 

I ITodoAction verwendet aus früheren actions.js todoReducer Tanne definieren. todoReducer wird kehrt ITodoState Instanz, die wie folgt aussieht:

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

Und das ist ITodo Schnittstelle, die ich verwendet wurde:

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

es einfach nur Objekt, das id enthält, Text, abgeschlossen. Ich denke, es scheint in Ordnung, aber wenn ich versuchte, Speicher mit Minderer wie folgt zu erstellen:

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

export const store = createStore(todoReducer); 

es irgendwie:

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): {}' 

Sieht aus wie ich meine Minderer zu beheben, aber ich tat es nicht Wie man Reducer mit Reducer definiert < {} >, alle Versuche mit einer ähnlichen Nachricht fehlgeschlagen, wie "blablabla ist nicht zu blablabla zuweisbar".

Was ich will, ist nur mit meinem einfachen Reducer, aber warum kann ich nicht? Es wird auch nicht mit combineReducer funktionieren, zu diesem Zeitpunkt musste es eine Art von ReducerMap oder etwas verwenden, ich erinnere mich nicht, was die tatsächliche Schnittstelle war.

fand ich viele Typoskript + redux verwandten Beiträge, aber sie haben Reducer < {} > oder Aktion > T < wie etwas nicht verwendet, sie sie selbst definierte Aktion und Reducer nur gewohnt sind, aber die sind gerade gemacht Ich verwirre, warum sie Reducer und Action Interface nicht benutzt haben, und warum es funktioniert hat?

Irgendwie fand ich die Typdeklaration von redux, und dies ist, wie Reducer < {} > wie folgt aussieht:

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

möglichst ich verstehen kann, ist Reducer < {} > eine Funktion, die zurückgibt Zustand. Warum hat mein TodoReducer nicht mit ihnen gearbeitet? Ich versuchte mit Reducer <ITodoState>, aber es wird nicht funktionieren.

Ich bin verwirrend wirklich jetzt, und sieht aus wie ich etwas fehlt bin groß, aber, wow, ich es wirklich nicht bekommen, was bin ich dabei. Ich hätte nie gedacht, dass Redux mit TypeScript schwer sein könnte.

versuchte ich mein Bestes, aber sieht aus wie ich eine Hand benötigen. Jeder Rat wird sehr zu schätzen wissen.

+0

Ich laufe auf das gleiche Problem. Haben Sie eine Lösung gefunden? –

+0

@ erik-sn Eigentlich ja, ändern Sie einfach die Exportfunktion todoReducer, um die Standardfunktion todoReducer zu exportieren, und es hat funktioniert. – modernator

Antwort

1

Fixed, nur Export Reducer als Standard, und es hat funktioniert.

Verwandte Themen