2017-05-05 75 views
1

试图用typescript和redux构建一个简单的反应crud应用程序,并遇到以下问题。我有一个函数,它具有指定的签名,它将采用一个人物作为参数,如此处所示。mapDispatchToProps with typingcript正在困难

export default function savePerson(person: Person) { 
    return async (dispatch: any) => { 
     let newPerson = await axios.post('/api/people/addPeron', person); 
     dispatch(addPersonSuccess(person)); 
    } 
} 

现在,当我想我的组件connnect到我有与mapDispatchToProps麻烦终极版。这是我的代码。

function mapDispatchToProps(dispatch: any) { 
    const actions = { 
    savePerson:() => dispatch(savePerson()) 
    } 
    return actions; 
} 

的问题是,savePerson功能需要一个人传递给它,但是我没有访问我的状态在mapDispatchToProps,而且由于功能缺失的论点我的代码不会编译。有任何想法吗?

与Solution编辑:

这里是使此代码工作所需的一个变化的代码。

function mapDispatchToProps(dispatch: any) { 
    const actions = { 
    savePerson: (person: Person) => dispatch(savePerson(person)) 
    } 
    return actions; 
} 

我不得不人物对象传递给我正在调用dispatch匿名函数。

回答

0
import {IStoreState} from "myGlobalTypes" 
import {Dispatch} from "redux"; 

interface IMyComponentProps { 
    savePerson: (person: Person) => Promise<void>; 
} 
class MyComponent extends React.Component<IMyComponentProps, void>{ 
    someMethod(person: Person) { 
     this.actions.savePerson(person); 
    } 
} 

const WrappedComponent = connect(
    (state: IStoreState, ownProps: {}) => ({ 
     // here you can map state 
    }), 
    (dispatch: Dispatch<IStoreState>) => ({ 
     // savePerson: (person: Person) => dispatch(savePerson(person)) 
     actions: { 
     savePerson: (person: Person) => dispatch(savePerson(person)) 
     } 
    } 

);

+0

我从你的答案中得到的主要结果是,我没有将人物对象传递给我调用dispatch的匿名函数,一旦我做了它的工作。现在接受这个答案。 –