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

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);
});
};
}

无论如何欢呼

米克