Question

我刚开始尝试使用react和redux，我在路上遇到了几个问题。

当我尝试在路由更改时呈现异步数据时，已调度的操作将被触发两次。首先是未定义的，而不是真实的数据。

这是我的商店

import { createStore, combineReducers, applyMiddleware } from 'redux'
import createLogger from 'redux-logger'
import thunk from 'redux-thunk'
import { routerReducer, routerMiddleware, push } from 'react-router-redux'
import reducers from '../reducers'
import { browserHistory } from 'react-router';

const middleware = [ thunk ];
if (process.env.NODE_ENV !== 'production') {
    middleware.push(createLogger());
}

middleware.push(routerMiddleware(browserHistory));


    // Add the reducer to your store on the `routing` key
    const store = createStore(
        combineReducers({
            reducers,
            routing: routerReducer
        }),
        applyMiddleware(...middleware),

    )

    export default store;

减速器

export const RESOLVED_GET_PROFILE = 'RESOLVED_GET_PROFILE'

const profileReducer = (state = {}, action) => {
    switch (action.type) {
        case 'SET_PROFILE':
              return  {profile: action.profile}

        default:
            return state;
    }
};

export default profileReducer;

动作

import * as types from './actionTypes';
import Api from '../middleware/Api';

export function getProfile() {
    return dispatch => {
        dispatch(setLoadingProfileState()); // Show a loading spinner
        Api.get('profile').then(profile => {
            dispatch(doneFetchingProfile);
            dispatch(setProfile(profile));
        }).catch(error => {
            dispatch(showError(error));
            throw(error);
        });
    }
}

function setProfile(data) {
    return {
        type: types.SET_PROFILE,
        profile: data
    }
}


function setLoadingProfileState() {
    return {
        type: types.SHOW_SPINNER,
        loaded: false
    }
}

function doneFetchingProfile() {
    return {
        type: types.HIDE_SPINNER,
        loaded: true
    }
}

function showError() {
    return {
        type: types.SHOW_ERROR,
        loaded: false,
        error: 'error'
    }
}

这是我的组件

import React, {PropTypes, Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as profileActions from '../../../actions/profileActions';


class Profile extends Component {

    static propTypes = {
        profile: PropTypes.object.isRequired,
    };

    constructor(props) {
        super(props);

        this.state = {
            profile:{
                username: '',
                password: '',
                email: ''
            }
        }
        this.onUpdate = this.onUpdate.bind(this)
    }

    onUpdate(event) {
        alert()
    }

    componentDidMount() {
        //here I dispatch the action
        this.props.actions.getProfile()
    }

    componentWillReceiveProps(nextProps) {

    }

    render() {
        console.log(this.props)
        //this.props.profile on first is undefined and then filled
        const { profile } = this.props.profile

        return (
            <div>

            </div>
        );
    }
}

function mapStateToProps(state) {

    return {
        profile: state.default.profile,
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(profileActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Profile);

我错了什么？

Answer 1

这就是这里发生的事情

您的组件在控制台上呈现并显示未定义，因为到目前为止还没有配置文件数据。
在组件安装之后，它调用componentDidmount，它会触发一个动作以从URL获取数据。
您从api获取数据并更新还原组件的redux状态。
因此，您再次调用渲染函数，这次显示个人资料数据。

没有任何调度两次。代码非常好。

Answer 2

您发送了2个动作

eg : The format is 2017-02-13 17:58:38


2017-02-13 20:07:17 [HTTP-9] DEBUG 
2017-02-17 20:07:18 [HTTP-9] DEBUG 
2017-02-20 20:07:18 [HTTP-9] DEBUG 
.
.

他们中的第一个没有数据，它看起来像是设置了一些数据并更新你的组件。

Answer 3

你说//this.props.profile on first is undefined and then filled

这是因为在第一次渲染中，state.profile undefined，直到请求响应到达并且setProfile操作被调度。< / p>

还有问题安德鲁注意到你正在呼叫dispatch(doneFetchingProfile)。由于您正在使用redux-thunk，因此会触发调用doneFetchingProfile(dispatch, getState)，但操作HIDE_SPINNER将永远不会被调度。

更新：您的代码没有任何问题。您可以在SHOW_SPINNER之前看到console.log(this.props)的输出，并且没有profile，因为状态中也没有profile。

然后，当您的请求成功时，profile将设置为状态，然后传递给您的组件，然后您可以在日志中看到profile已设置。这些不是派遣的行动，这是道具的日志。

第一次是未定义的，因为在reducer中声明的初始状态是{}（此处还有profile。

如果你改变了

const profileReducer = (state = {}, action) => {

到

const profileReducer = (state = {profile: 'some initial value'}, action) => {

您会看到第一个console.log(this.props)将profile显示值'some initial value'，然后更改为远程数据。

与redux和react-react发送动作两次

3 个答案: