Question

我想知道是否有人可以提供帮助？我是React和Redux的新手，我有一个小网站，列出了“事故”，然后你选择了一个事件，它返回了事件信息和参与事件的响应者列表。有两个按钮，一个说我要去事件，一个说我不是。我已经完成了所有这些工作（非常好），但是当我将状态从“前进”更改为“非”时，反之亦然，响应者列表保持静态，直到我刷新页面。

我希望响应者列表能够刷新并显示我的回复。

响应者是由reducer管理的状态，动作对另一个系统进行API调用。我也有Redux-Thunk。

我确信我错过了一些非常容易的东西，但对于我的生活，我似乎可以让它发挥作用。

我的事件展示页

import React, {PropTypes} from 'react';
import {connect}          from 'react-redux';
import {Link}             from 'react-router';
import {loadIncident, loadResponders, setResponse, theResponse} from '../actions/incidentActions';
import RespondersList  from './responders_list';
class IncidentShow extends React.Component {
    componentWillMount() {
        this.props.loadIncident(this.props.params.id);
        this.props.loadResponders(this.props.params.id);
    }
    renderIncident() {
        if (this.props.incident == null) {
            return (<div>Loading</div>)
        }
        const incident = this.props.incident;
            return (
                <div>{incident.Title}</div>
            );
    }
    renderResponse(){
        if (this.props.responded == null) {
            return (<div>Loading</div>)
        }
        const responded = this.props.responded;
        return (
            <div>{responded.responded}</div>
        );
    }
    setResponse(e) {
        // console.log('Oi!!');
        const id = this.props.params.id;
        const teamUserId = 1; //Team Site user ID
        const message = '';
        const phone = '079000000';
        const arm = '207';
        const response = e.target.value;
        this.props.setResponse(id, response, teamUserId,message,phone,arm);
        this.props.theResponse(response);
    }
    render() {
        return (
            <div className="row">
            <div className="card">
                <div className="card-content">
                    <div className="card-title">Incident</div>
                    {this.renderIncident()}
                </div>
                <div className="card-action no-pad row">
                    <div className="card-title center-align">
                        Please respond
                    </div>
                    <div id="response" className="response" onChange={this.setResponse.bind(this)}>
                        <div className="col m6">
                            <label className="yes">
                                <input type="radio" value="Yes" name="response"/><span>Going</span>
                            </label>
                        </div>
                        <div className="col m6">
                            <label className="no">
                                <input type="radio" value="No" name="response"/><span>Not Going</span>
                            </label>
                        </div>
                    </div>
                    <div className="col s12 center-align">
                        You responded: {this.renderResponse()}
                    </div>
                </div>
            </div>
                <div className="card">
                    <div className="card-content">
                        <div className="card-title">Responders</div>
                        <RespondersList />
                    </div>
                </div>
            </div>
        )
    }
}
function mapStateToProps(state) {
    // console.log('show', state);
    return {
        incident:   state.incident.incident,
        responders: state.responders.responders,
        response:   state.response,
        responded:  state.responded
    };
}
export default connect(mapStateToProps, {loadIncident, loadResponders, setResponse, theResponse})(IncidentShow);

我已经尝试将我的响应者列表移动到他们自己的页面，甚至让他们成为一个班级，现在抓着稻草......

import React, {Component} from 'react';
import {connect}          from 'react-redux';
// import {loadResponders}   from '../actions/incidentActions';
class RespondersList extends Component {
    // componentWillUpdate() {
    //     this.props.loadResponders(4);
    // }
    render() {
        if (this.props.responders == null) {
            return (<div>Loading</div>)
        }
        const responders = this.props.responders.map((responder) => {
            return (
                <li className="collection-item" key={responder.ID}>
                    <span className="right">{responder.Phone}</span>
                    {responder.Name}
                </li>
            )
        });
        return (
            <ul className="collection">
                {responders}
            </ul>
        );
    }
}
function mapStateToProps(state) {
    // console.log('show', state);
    return {
        responders: state.responders.responders,
    };
}
export default connect(mapStateToProps)(RespondersList);

这是我的行动页面

import * as types from './actionTypes';
import incidentApi from '../api/incidentApi';
export function loadIncidentsSuccess(incidents) {
    // console.log('from Action',incidents);
    return {
        type: types.LOAD_INCIDENTS_SUCCESS,
        payload: incidents
    };
}
export function loadIncidentSuccess(incident) {
    // console.log('from Action', incident);
    return {
        type: types.LOAD_INCIDENT_SUCCESS,
        payload: incident
    };
}
export function loadRespondersSuccess(responders) {
    //console.log('from Action', responders);
    return {
        type: types.LOAD_RESPONDERS_SUCCESS,
        payload: responders
    };
}
export function loadResponseSuccess(response) {
    // console.log('from Action', response);
    return {
        type: types.LOAD_RESPONSE_SUCCESS,
        payload: response
    };
}
export function loadTheResponseSuccess(response) {
   // console.log('from Action', response);
    return {
        type: types.LOAD_THE_RESPONSE_SUCCESS,
        payload: response
    };
}
export function loadIncidents() {
    return function (dispatch) {
        return incidentApi.fetchIncidents()
            .then(incidents => {
                // console.log(incidents);
                dispatch(loadIncidentsSuccess(incidents));
            })
            .catch(error => {
                throw(error);
            });
    };
}
export function loadIncident(id) {
    return function (dispatch) {
        return incidentApi.fetchIncident(id)
            .then(incident => {
                // console.log(incidents);
                dispatch(loadIncidentSuccess(incident));
            })
            .catch(error => {
                throw(error);
            });
    };
}
export function loadResponders(id) {
    return function (dispatch) {
        return incidentApi.fetchResponders(id)
            .then(responders => {
                // console.log(incidents);
                dispatch(loadRespondersSuccess(responders));
            })
            .catch(error => {
                throw(error);
            });
    };
}
export function setResponse(id, response, teamUserId, message, phone, arm) {
    return function (dispatch) {
        return incidentApi.setResponse(id, response, teamUserId, message, phone, arm)
            .then(response => {
                // console.log('action',response);
                dispatch(loadResponseSuccess(response));
            })
            .catch(error => {
                throw(error);
            });
    };
}
export function theResponse(response){
    console.log('action', response);
    return function (dispatch){
        return dispatch(loadTheResponseSuccess(response));
    }
}

最后我的响应者减速器

import * as types from '../actions/actionTypes';


export default function responseReducer(state = {
    response:  null,
    responded: null,
    responders: []
}, action) {
    switch (action.type) {

        case types.LOAD_THE_RESPONSE_SUCCESS:
            console.log(state);
            return {
                ...state,
                responded: action.payload
            };
        case types.LOAD_RESPONSE_SUCCESS:
            // console.log(state);
            return {
                ...state,
                response: action.payload
            };
        case types.LOAD_RESPONDERS_SUCCESS:
            return {
                ...state,
                responders: action.payload
            };
        default:
            return state;
    }
}

请保持温和。

米克

Answer 1

好的，我已经通过调度loadResponseSuccess后调度loadResponders操作找到了解决方案/解决方法。所以我的setResponse动作现在看起来像这样。

export function setResponse(id, response, teamUserId, message, phone, arm) {
    return function (dispatch) {
        return incidentApi.setResponse(id, response, teamUserId, message, phone, arm)
            .then(response => {
                console.log('action',id);
                dispatch(loadResponseSuccess(response));
                dispatch(loadResponders(id)); //***added this dispatch.
            })
            .catch(error => {
                throw(error);
            });
    };
}

无论如何，欢呼声

米克

如何从react和redux中的状态更改刷新屏幕数据

1 个答案: