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

Question

我想知道是否有人可以提供帮助？ 我是React和Redux的新手，我有一个小型网站，上面列出了“事件”，然后您选择一个事件，它会返回事件信息和参与该事件的响应者列表。 有两个按钮，一个表示我要去处理此事件，另一个表示我不参加事件。 我已经完成了所有这些工作（非常高兴），但是当我将状态从“正在”更改为“不”时（反之亦然），响应者列表将保持不变，直到刷新页面为止。

我希望响应者列表刷新并显示我的响应。

响应者是由化简器管理的状态，该操作对另一个系统进行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);
            });
    };
}

反正加油

米克