[英]How to refresh onscreen data from state change in react and redux
I wonder if anyone can help? 我想知道是否有人可以提供帮助? I'm new to React and Redux, I have a small site that lists 'Incidents' you then pick an incident and it returns the incident information and a list of responders attending the incident. 我是React和Redux的新手,我有一个小型网站,上面列出了“事件”,然后您选择一个事件,它会返回事件信息和参与该事件的响应者列表。 There are two buttons one that says that I am going to the incident and one that says I am not. 有两个按钮,一个表示我要去处理此事件,另一个表示我不参加事件。 I have all of this working (quite chuffed) but when I change my status from 'going' to 'not' or vice versa the list of responders stays static till I refresh the page. 我已经完成了所有这些工作(非常高兴),但是当我将状态从“正在”更改为“不”时(反之亦然),响应者列表将保持不变,直到刷新页面为止。
I want list of responders to refresh and show my response. 我希望响应者列表刷新并显示我的响应。
The Responders are a state that is managed by the reducer and the action makes an API call to another system. 响应者是由化简器管理的状态,该操作对另一个系统进行API调用。 I also have Redux-Thunk in the equation as well. 等式中也有Redux-Thunk。
I'm sure I'm missing something incredibly easy but for the life of me I can seem to get this to work. 我确信我缺少了一件非常简单的事情,但是对于我一生来说,我似乎可以使它正常工作。
My Incident Show Page 我的事件显示页面
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);
I have tried moving my list of responders to their own page and even made them a class, clutching at straws now... 我尝试将响应者列表移到他们自己的页面上,甚至使他们成为一类,现在紧紧抓住稻草...
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);
and this is my actions page 这是我的动作页面
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));
}
}
and finally my responder reducer 最后是我的响应者减速器
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;
}
}
Please be gentle. 请保持温柔。
Mick 米克
Ok i have found a solution/work around by dispatching the loadResponders action after dispatching the loadResponseSuccess. 好的,我已经在调度loadResponseSuccess之后通过调度loadResponders操作找到了解决方案/解决方法。 so my setResponse action now looks like this. 所以我的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);
});
};
}
cheers anyway 反正加油
Mick 米克
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.