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

Question

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

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

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

[{first_name: "Rick", "last_name": "Grimes"}]

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

这是我的几个文件：

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

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)

在上面的代码中，我总是显示 Is Fetching 段落，但即使删除它，我也无法访问用户数据。我想我已经开始了一些事情，因为当我 console.log 我可以看到我的动作被分派并且数据被添加到状态，但我想我在与这些数据的 link 通信中遗漏了一些东西到 UI 组件。我走的路好还是我有很多东西要重构？任何帮助都会非常有帮助！

Answer 1

鉴于您正在立即获取数据，我允许自己假设 isFetching 一开始可能是正确的。向你的减速器添加一个初始状态

state = { isFetching: true, user: null }

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

function mapStateToProps(state) {

    const {isFetching, user } = state.connectedUser

    return {
        isFetching,
        user
    }
}

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

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

React - Redux - Connect data fetched to Component

reactjs

redux

react-redux