Question

我有一个API类，它有各种方法可以与后端进行通信，比如“login，register，createPost”等。我将这个类连接到reducer。 reducer包含用户信息的state，我想在我的Api类中访问它：

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（通过redux连接）信息，我想在第二种方法中访问它（this.props.api.key我被星星包围）。我试图这样做是因为我在不同的屏幕上有很多动作，并且用户必须将他们的身份验证信息传递给他们在他们尝试做的任何事情之前调用的api方法才能够执行任何相应的行动。我认为在我的Api类中传递用户信息更容易，而不是将Api状态导入到我调用操作的每个不同文件中。

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

const api = new Api();

因为它给我一个错误“无法读取未定义的属性存储”，所以我无法在各自的文件中调用api.login（withArgs）动作，如果我将这些方法设为静态，则无法访问this.props.whatever

如何实例化连接到redux全局状态的类，或者如何在reducer文件之外访问该全局状态的信息？

Answer 1

由于Api扩展了React.Component，为什么你要自己实例化该类而不让React为你渲染它？

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

或者如果你没有使用JSX

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

如何实例化使用redux Connect

1 个答案: