我有一个父组件和一个子组件。我可以看到reducer正在得到更新(请参考屏幕截图),但它没有重新渲染组件。我正在调用一些API,一旦响应到来,它只会更新一些变量并重新呈现组件。
父组件
import React, { Component } from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import {connect} from "react-redux";
import { bindActionCreators } from 'redux'
import ProfileInfo from '../components/Profile/ProfileInfo'
import Details from '../components/Profile/Details'
import UnitSpec from '../components/Profile/UnitSpec'
import * as profileActionCreators from "./../actions/profileActions";
import * as StaticData from '../utils/country'
class NewProfilePage extends Component {
constructor(props) {
super(props);
this.state = { tabIndex: 0 ,
countryList: StaticData.Country,
};
let { dispatch } = this.props
this.actions = bindActionCreators({...profileActionCreators} , dispatch);
}
componentWillReceiveProps(nextProps) {
console.log('nextProps', nextProps)
}
render() {
return (
<div className="admin-holder">
<div className="row profile-row">
<div className="small-12 large-4 columns">
<ProfileInfo></ProfileInfo>
</div>
<div className="small-12 large-8 columns">
<Tabs selectedIndex={this.state.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>
<TabList>
<Tab>Details</Tab>
<Tab>Unit Spec</Tab>
<Tab>Imaginery</Tab>
<Tab>Menu</Tab>
</TabList>
<TabPanel>
<Details updateDetails = {(userDetail) => this.actions.updateDetails(userDetail)} countryList={this.state.countryList}/>
</TabPanel>
<TabPanel>
<UnitSpec staticData={StaticData}/>
</TabPanel>
<TabPanel>
</TabPanel>
<TabPanel>
</TabPanel>
</Tabs>
</div>
</div>
</div>
);
}
}
const mapStateToProps= (state) => {
console.log('state', state)
return{
profileReducer: state.profileReducer
};
};
export default connect(mapStateToProps)(NewProfilePage);
还原器
import * as types from '../constant';
const initialCommonState = {
countryList: [],
loadingCountryList: false,
isProfileUpdated: false
}
const profileReducer = (state=initialCommonState, action) => {
switch(action.type){
case types.UPDATE_DETAILS + "_FULFILLED":
const response = action.payload;
return Object.assign({}, state, {
isProfileUpdated: true
});
case types.UPDATE_DETAILS + "_PENDING":
return Object.assign({}, state, {
isProfileUpdated: false
});
case types.UPDATE_DETAILS + "_REJECTED":
return Object.assign({}, state, {
isProfileUpdated: false
});
default :
return state
}
}
export default profileReducer;
也请查看屏幕截图,您可以看到"isProfileUpdated“已更改为true
商店
import {createStore,combineReducers,applyMiddleware} from 'redux'
import logger from 'redux-logger';
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import reducers from '../reducers';
const middleware = [];
if (process.env.NODE_ENV === 'development') {
middleware.push(logger);
}
export default createStore(
combineReducers({reducers}),
{},
//applyMiddleware(logger(),thunk , promise())
applyMiddleware(logger, thunk , promise())
)
发布于 2018-07-19 04:57:56
您的状态包含个人资料
const mapStateToProps= (state) => {
console.log('state', state)
return{
profileReducer: state.profile
};
};
https://stackoverflow.com/questions/51410412
复制相似问题