Reactjs React-Redux-连接提取到组件的数据

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

我遵循了Todo教程，并且遵循了redux网站上的异步示例，但是我被绊住了

这是我的问题，在我的应用程序中，我希望从远程服务器获取用户。因此，服务器向我发送一个包含对象的json数组（如果服务器直接向我发送对象，可能会更好？） 我获得的json看起来是这样的（我只输入了两个字段，但实际中还有更多字段）：

[{名字：“瑞克”，“姓氏”：“格里姆斯”}]

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

以下是我的几个文件：

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

actions/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))
            )

    }
}

reducer/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)

从“React”导入React；
从“../actions”导入{fetchConnectedUser}；
从'react redux'导入{connect}；
类概要文件扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
const{dispatch}=this.props；
分派（fetchConnectedUser（））；
}
render（）{
const{user，isFetching}=this.props；
日志（“Props日志：”，this.Props）；
返回(
{isFetching&&
这很吸引人
}
{！太吸引人了&&
在此处调用组件并将用户数据作为道具传递
}
)
}
}
函数MapStateTops（状态）{
const{isFetching，user:connectedUser}=connectedUser | |{isFetching:true，user:[]}
返回{
很吸引人，
用户：state.connectedUser
}
}
导出默认连接（MapStateTops）（配置文件）

在上面的代码中，我总是显示

正在获取的
段落，但即使删除它，我也无法访问用户数据。
我想我有了一个开始，因为当我使用console.log时，我可以看到我的操作被调度，数据被添加到状态中，但是我认为在与UI组件的数据的链接通信中缺少了一些东西。
我是走上了正轨还是有很多东西需要重构？任何帮助都会很有帮助
 看到您正在立即获取数据，我允许自己假设isFetching在开始时可能是真的。向减速器添加初始状态

state = { isFetching: true, user: null }

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

function mapStateToProps(state) {

    const {isFetching, user } = state.connectedUser

    return {
        isFetching,
        user
    }
}

希望这个管用，感觉干净