Question

我正在创建一个React应用程序并将Redux集成到它中，以便管理状态并执行网络请求。

我遵循了Todo教程，我正在关注redux网站上的异步示例，但我被困了。

这是我的问题，我想在我的应用程序中从远程服务器获取用户。所以服务器发给我一个包含一个对象的json数组（如果服务器直接发送给我一个对象，可能会更好吗？）我获得的json看起来像那样（我只放了两个字段，但实际上有更多字段）：

[{first_name：“Rick”，“last_name”：“Grimes”}]

无论如何我可以从服务器获取数据，但我不能将用户的数据注入我的应用程序，我希望你能帮助我，但最重要的是我明白为什么它不起作用。

以下是我的几个文件：

我有两个动作，一个用于请求，另一个用于响应：

动作/ index.js

export const REQUEST_CONNECTED_USER = 'REQUEST_CONNECTED_USER';
export const RECEIVE_CONNECTED_USER = 'RECEIVE_CONNECTED_USER';
function requestConnectedUser(){
    return {
        type: REQUEST_CONNECTED_USER
    }
}
function receiveConnectedUser(user){
    return {
        type: RECEIVE_CONNECTED_USER,
        user:user,
        receivedAt: Date.now()
    }
}
export function fetchConnectedUser(){
    return function(dispatch) {
        dispatch(requestConnectedUser());

        return fetch(`http://local.particeep.com:9000/fake-user`)
            .then(response =>
                response.json()
            )
            .then(json =>
                dispatch(receiveConnectedUser(json))
            )

    }
}

减速器/ index.js

import { REQUEST_CONNECTED_USER, RECEIVE_CONNECTED_USER } from '../actions
function connectedUser(state= {
}, action){
    switch (action.type){
        case REQUEST_CONNECTED_USER:
            return Object.assign({}, state, {
                isFetching: true
            });
        case RECEIVE_CONNECTED_USER:
            return Object.assign({}, state, {
                user: action.user,
                isFetching: false
            });
        default:
            return state;
    }
}

我最终得到了我的容器元素，我称之为Profile.js

import React from 'react';
import { fetchConnectedUser } from '../actions';
import { connect } from 'react-redux';

class Profile extends React.Component{
    constructor(props){
        super(props);
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch(fetchConnectedUser());
    }

    render(){
        const { user, isFetching} = this.props;

        console.log("Props log :", this.props);
        return  (

            <DashboardContent>

                {isFetching &&
                <div>
                    Is fetching
                </div>
                }

                {!isFetching &&
                    <div>
                        Call component here and pass user data as props
                    </div>
                }
            </DashboardContent>
        )
    }
}

function mapStateToProps(state) {

    const {isFetching, user: connectedUser } = connectedUser || { isFetching: true, user: []}

    return {
        isFetching,
        user: state.connectedUser
    }
}


export default connect(mapStateToProps)(Profile)

在上面的代码中，我总是显示Is Fetching段，但即使删除它，我也无法访问用户数据。我认为我有一些东西的开头，因为当我在console.log时，我可以看到我的行为被调度并且数据被添加到状态，但我认为我在链接中将某些内容与这些数据丢失到UI组件中。我是在好的方式还是我有很多东西需要重构？任何帮助都会非常有帮助！

Answer 1

看到你正在立即获取数据我允许自己假设isFetching在开始时可能是真的。将初始状态添加到reducer

state = { isFetching: true, user: null }

然后假设你正确设置了减速器：

function mapStateToProps(state) {

    const {isFetching, user } = state.connectedUser

    return {
        isFetching,
        user
    }
}

希望这有效，感觉很干净。

React - Redux - 将获取的数据连接到Component

1 个答案: