如何从react和redux中的状态更改刷新屏幕数据
如何从react和redux中的状态更改刷新屏幕数据
提问于 2017-01-19 20:18:31
不知道有没有人能帮上忙？我是React和Redux的新手，我有一个小网站，列出了‘事件’，然后选择一个事件，它会返回事件信息和参加该事件的响应者列表。有两个按钮，一个按钮说我要去事件发生，另一个按钮说我不去。所有这些我都能正常工作(相当得意)，但当我把状态从“去”改为“不去”，或者反之亦然，在我刷新页面之前，响应者列表一直保持不变。
我希望响应者列表刷新并显示我的响应。
Responders是由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));
}
}最后是我的响应器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;
}
}请温文点。
米克
Stack Overflow用户
发布于 2017-02-01 21:54:06
好了，我已经找到了一个解决方案/变通方法，就是在分派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);
});
};
}不管怎样，干杯
米克
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41741627
复制相关文章
相似问题
腾讯云开发者
