2017-11-18 145 views
0

我有一个API类,它具有与后端进行通信的各种方法,如“login,register,createPost”等。我将这个类连接到reducer。减速机包含用户信息的state,我想在我的API类访问:如何实例化一个使用redux的类的实例连接

import axios from 'axios'; 
import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

@connect(state => ({ 
    api: state.api, 
})) 
export default class Api extends Component { 

    export const login = async({args}) => { 

    const url = this.props.api.url.concat('/login/'); 
    const config = { 
     headers: { 
      'X-CSRFTOKEN': this.props.api.token 
      } 
     }; 
    try { 
     const data = await axios.post(url, {"username": args.username, "password": args.password}, config); 
     this.props.api.key = data.data.token; 
     this.props.api.user = data.data.user; 
     return data; 
    } catch (e) { 
     throw e; 
     } 
    } 
}; 

    async createPost(args (content of the post)) { 
     try { 
      const url = this.props.api.url.concat('/post/PostList'); 
      const Response = await axios.post(url, {...args}, !**this.props.api.key**!); 
      return Response; 
     } catch (e) { 
      throw e; 
     } 
    } 

在第一种方法,我设置了进口state.key和state.user(通过终极版连接)信息,并且我想在第二种方法(我被星星围绕的this.props.api.key)中访问它。我试图这样做,因为我在不同的屏幕上有很多操作,并且用户必须将他们的身份验证信息传递给他们要调用的api方法,而不管他们试图做什么以便能够执行任何相应的行动。我认为在我的Api类中传递用户信息会比较容易,而不是将Api状态导入到我称为动作的每个不同文件中。

我遇到的问题是我无法实例化新对象像

const api = new Api(); 

API,因为它给了我一个错误“无法读取的未定义的属性商店”,所以我不能调用相应的文件api.login(withArgs)的动作,如果我做的静态方法他们将无法访问this.props.whatever

如何实例化与redux的全局状态相关的类,或者如何访问在我的reducer文件之外的全局状态中的信息?

回答

0

由于Api扩展了React.Component,你为什么试图自己实例化类,让React为你渲染?

ReactDOM.render(<Api store={store} />) 

,或者如果你没有使用JSX

ReactDOM.render(React.createElement(Api, { store })