2017-08-15 56 views
0

我在行动以下功能无法调用咖喱功能从componentDidMount()的阵营组成

export const fetchDeviceData = (deviceData: Object): ThunkAction => (dispatch: Dispatch, getState: GetState, axios: any) => { 

    console.log('inside fetchDeviceData', deviceData); 
    return dispatch(fetchDeviceDataAPI(axios, url, deviceData)); 

}; 

,我把它叫做以下列方式在componentDidMount()块在我的组件

// type declaration (imported from a separate file) 
export type DeviceReg = { 
    [deviceData: Object]: { 
     readyStatus: string, 
     err: any, 
     payload: Object, 
    } 
}; 

// Prop type declaration 
type Props = { 
    device_reg: DeviceRegType, 
    fetchDeviceData:() => void, 
} 

componentDidMount() { 
    const x = this.getDeviceData(); 
    console.log('header mount mobile', x); 
    action.fetchDeviceData(x); 
} 

// The connector 
const connector: Connector<{}, Props> = connect(
    ({ device_reg }: Reducer) => ({ device_reg }), 
    (dispatch: Dispatch) => ({ 
     fetchDeviceData: (deviceData) => dispatch(action.fetchDeviceData(deviceData)), 
    }), 
); 
export default Header; 

问题是,当我在函数中包含参数dispatch: Dispatch, getState: GetState, axios: any时,fetchDeviceData(x)函数没有被调用,但它在其他方面起作用。导入和依赖关系不是问题,因为我已经验证了它们的加载次数。

任何建议,提示或解决方案将有很大的帮助。如果您需要关于我的问题的任何澄清或背景,请告诉我。

在此先感谢。

+0

你可以分享你如何'connect'你的组件axios说法? – thedude

+0

在编辑中包含了一些额外的细节。请看一下。 – Deepank

+0

看起来像你应该调用this.props.fetchDeviceData(...) – thedude

回答

1

您可以尝试从dispatch: Dispatch, getState: GetState, axios: any中删除axios: any

我认为应该只有dispatch和getState,因为这就是通过redux-thunk注入的东西。

+0

已经试过了,没有工作。控制进入函数的唯一情况是当我删除所有三个参数(dispatch,getState和axios)时。无法弄清楚原因。 – Deepank

0

试着改变你的连接代码,使用对象的形式:

connect(
    <yourMapStateToProps>, 
    { 
     fetchDeviceData: actions.fetchDeviceData, 
    }  
) 

这应该使fetchDeviceData可作为你的一个道具叫。

另外,尽量删除函数签名只留下dispatchgetState

+0

好吧,会尝试。但你能告诉我为什么这种方法不起作用吗?在组件中直接调用一个函数是不是正确的? – Deepank

+0

不,操作应该是'dispatch'ed(除非它们通过'connect'绑定,正如我上面所描述的那样) – thedude