Question

我尝试在学习反应，redux项目中处理ajax数据，我不知道如何调度动作并在组件内设置状态

这是我的组件

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


class Profile extends Component {

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

    constructor(props) {
        super(props);

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

    onUpdate(event) {
        alert()
    }

    componentWillMount() {
    }

    componentDidMount() {
    }


    render() {

        const {profile} = this.props;
        return (
            <div>

            </div>
        );
    }
}

function mapStateToProps(state) {
    console.log(state)
    return {
        profile: state.default.profile,
    };
}

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

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

我按照以下方式创建商店

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 'RESOLVED_GET_PROFILE':
            return action.data;
        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.getAll('profile').then(profile => {
            dispatch(doneFetchingProfile(profile));
        }).catch(error => {
            throw(error);
        });
        /*Api.fetch(`profile`, (response) => {
            console.log(response)
            dispatch(doneFetchingBook()); // Hide loading spinner
            if(response.status == 200){
                dispatch(setProfile(response.json)); // Use a normal function to set the received state
            }else {
                dispatch(error)
            }
        }) */
    }
}

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


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

function doneFetchingProfile(data) {
    console.log(data)
    return {
        type: types.HIDE_SPINNER,
        profile: data
    }
}

function error() {
    return {type: types.SHOW_ERROR}
}

但我不知道如何在getProfile操作后调度操作并更新状态

Answer 1

您只需在发送RESOLVED_GET_PROFILE后立即发送您的活动doneFetchingProfile，或者只是监听RESOLVED_GET_PROFILE并隐藏微调器以减少它。

 Api.getAll('profile').then(profile => {
    dispatch(doneFetchingProfile(profile));
    dispatch(resoloveGetProfile(profile));
 })

实际上你做的一切都是正确的 - 所以我不明白你的问题是什么，所以如果你有别的意思 - 让我知道，我会试着描述你。

关于dispatch（resoloveGetProfile（profile））;

在那里你发送动作，它将更新你的状态，就像你做一些静态状态一样简单，我看到你已经有setProfile动作，所以你可以改变那一行，来调用你现有的功能。 / p>

dispatch(setProfile(profile))

比你需要在这个动作中减少你的状态

case 'SET_PROFILE' : (action, state) => {...state, profile: action.data}

比您的州将改变，您的组件将更新。请注意，您的“获取个人资料”方法＆＃39;最好从componentDidMount调用，以避免因执行Web请求而导致渲染冻结。

React Redux如何调度异步操作和更新状态

1 个答案:

关于dispatch（resoloveGetProfile（profile））;