我在这里遇到问题,我现在已经做了大约2周的减速。
我正在尝试创建一个加载器,所以我试图获得isFetching状态。使用thunk,我正在进行ajax fetch,并调度加载状态。
调用调度,因为我可以在控制台中看到。
在组件安装之前,它假设调用FETCH_PROFILE,并且isFetching设置为true,但是当我在console.log(this.props.profile.isFetching)时,它返回false。
对于FETCH_PROFILE_SUCCESS,它不会更新this.props.profile。 (或因为它没有重新渲染......所以我看不到它)
我几个小时以来一直在研究这个简单的事情,我不知道它为什么不更新......我确信我在某个地方犯了一些错误,但不知道是什么。
export const FETCH_PROFILE = 'FETCH_PROFILE';
export const FETCH_PROFILE_SUCCESS = 'FETCH_PROFILE_SUCCESS';
export const FETCH_PROFILE_FAIL = 'FETCH_PROFILE_FAIL';
export function getUserProfile() {
return (dispatch) => {
dispatch(getUserProfileStart());
const config2 = {
method: 'GET',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
credentials: 'include',
body: ``,
};
fetch('http://api.example.com/profile/',config2)
.then((resp) => resp.json())
.then(function(data) {
dispatch(getUserProfileSuccess(data));
return 0;
}).catch(function(error){
return dispatch({type: FETCH_PROFILE_FAIL});
})
}
}
function getUserProfileSuccess(data) {
return {
type: FETCH_PROFILE_SUCCESS,
isFetching: false,
payload: data
}
}
function getUserProfileStart() {
return {
type: FETCH_PROFILE,
isFetching: true
}
}
我的减速机
import {
FETCH_PROFILE,
FETCH_PROFILE_SUCCESS,
FETCH_PROFILE_FAIL
} from '../actions/profile';
export default function userProfile(state={isFetching: false}, action) {
switch(action.type) {
case FETCH_PROFILE:
return {...state, isFetching: true}
case FETCH_PROFILE_SUCCESS:
return {...state, isFetching: false, data: action.payload}
case FETCH_PROFILE_FAIL:
return { ...state, isFetching: false };
default:
return state
}
}
我的组件。
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import {connect } from 'react-redux';
import * as profileActions from '../../actions/profile';
import {bindActionCreators} from 'redux';
class ProfilePage extends React.Component {
constructor(props) {
super(props);
this.getUserProfile = this.getUserProfile.bind(this);
}
componentWillMount() {
this.props.actions.getUserProfile();
}
render() {
console.log('Checking isFetching State', this.props.profile.isFetching);
return (
<div>
some text here.
</div>
);
}
}
function mapStateToProps(state) {
console.log('Mapping Stat', state.profile);
return {
profile: state.userProfile
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(profileActions, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(s)(ProfilePage));
我的联合收割机......
import userProfile from './profile';
//some other imports...
export default combineReducers({
userProfile,
//other reducers that works...
});
答案 0 :(得分:1)
试试这个: 在创建商店时的索引
export const store = createStore(
combineReducer,
applyMiddleware(thunk) // choose you middleware....
//initial state as per need
);
&#13;
在减速机上:
import {
FETCH_PROFILE,
FETCH_PROFILE_SUCCESS,
FETCH_PROFILE_FAIL
} from '../actions/profile';
export default function userProfile(state= {
initialized: true,
init:false,
success:false,
fail:false,
}, action) {
switch(action.type) {
case FETCH_PROFILE:{
const message = action.message;
return Object.assign({}, state, {
init:true,
success:false,
fail:false,
data:message,
})
}
}
case FETCH_PROFILE_SUCCESS:{
const data = action.data;
return Object.assign({}, state, {
init:false,
success:true,
fail:false,
data:data,
})
}
case FETCH_PROFILE_FAIL:{
const err = action.err;
return Object.assign({}, state, {
init:false,
success:false,
fail:true,
data:err,
})
}
default:
return state
}
}
&#13;
在组件:
import React from 'react';
//use can use this if required.
//import withStyles from 'isomorphic-style-loader/lib/withStyles';
import {connect } from 'react-redux';
import { profileActions} from '../../actions/profile';
//import {bindActionCreators} from 'redux';
class ProfilePage extends React.Component {
constructor(props) {
super(props);
this.state{
success:false;
}
}
componentWillMount() {
this.props.getUserProfile();
}
componentWillReciveProps(nextprop){
if(nextprop.success===true){
this.setState({success==true});
}
}
render() {
return (
{(this.state.success)?<div>this.props.profile.data.yourdata</div>:<div>Loading....</div>}
);
}
}
function mapStateToProps(state) {
return {
profile: state.userProfile
};
}
export default connect(mapStateToProps,{profileActions
})(ProfilePage);
&#13;
行动:
export const FETCH_PROFILE = 'FETCH_PROFILE';
export const FETCH_PROFILE_SUCCESS = 'FETCH_PROFILE_SUCCESS';
export const FETCH_PROFILE_FAIL = 'FETCH_PROFILE_FAIL';
export function getUserProfile() {
return (dispatch) => {
dispatch(getUserProfileStart(const message:"fetch start"));
const config2 = {
method: 'GET',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
credentials: 'include',
body: ``,
};
fetch('http://api.example.com/profile/',config2)
.then((resp) => resp.json())
.then(function(data) {
dispatch(getUserProfileSuccess(data));
return 0;
}).catch(function(error){
return dispatch(getUserProfileError(error));
})
}
}
function getUserProfileSuccess(data) {
return {
type: FETCH_PROFILE_SUCCESS,
data
}
}
function getUserProfileStart(message) {
return {
type: FETCH_PROFILE,
message
}
}
function getUserProfileError(err) {
return {
type: FETCH_PROFILE,
err
}
}
&#13;