我的Redux状态正在更改，但不会重新呈现

Question

我有一个父组件和一个子组件。我可以看到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”已更改为“真”

商店

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())
)

Answer 1

您的状态包含个人资料

#inner-portfolio-wrapper {
  position: relative;
  width: 150px;
  height: 50px;
}

.portfolio-item {
  display: none;
  animation: fadeIn 2s;
}

.portfolio-item .active {
  display: block;
  animation: fadeOut 2s;
}

.portfolio-item:first-child {
  display: block;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}