爲什麼react-redux創建多個狀態？

Question

這不是一個問題，只是一個問題。

我正在使用React-Redux來處理我的應用程序狀態。我連我的最高水平組件，命名爲Academy，與mapStateToProps，mapDispatchToProps等

然後我有它只是爲了與下面的代碼行派遣連接的子組件，SlideOverBar：

export default connect(null, mapDispatchToProps)(SlideOverBar);

現在，一切都按預期工作，但由於某些原因，在我的React Developer Tools中，SlideOverBar組件具有完整的狀態副本。這種狀態從不更新，但我擔心它可能會導致任何問題。誰能告訴我 - 這是正常的，如果沒有，我能做些什麼。

澄清，這裏的一些截圖，從開發工具：

學院組成，在需要時將狀態更新。你可以看到，workshopSelection.selectedLevel件狀態已經從null到4更新，這是因爲它應該是：

的SlideOverBar組件。這裏的州是Academy的州的副本。它從來沒有更新（這是好的 - Academy狀態應該控制應用程序），但我不明白爲什麼它在那裏。該組件上的mapStateToProps值設置爲null。

UPDATE

下面是每個組件的完整代碼。

學院：

import React, {Component, PropTypes} from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import {showSlideOver, hideSlideOver} from '../../data/actions/actions'; 
import styles from '../../cssPartials/Academy.css'; 
import TopBar from './../TopBar'; 
import SideMenu from './../SideMenu'; 
import ViewPort from './../ViewPort'; 
import SlideOverBar from '../slideOver/SlideOverBar'; 

class Academy extends Component { 

    render(){ 

     return (
      <div className={styles.academy}> 
       <div className={styles.spacer} /> 
       <TopBar /> 
       <div className={styles.container}> 
        <SideMenu /> 
        <ViewPort> 
         {this.props.children} 
        </ViewPort> 
       </div> 
       <SlideOverBar slideOver={this.props.slideOver} 
           workshopSelection={this.props.workshopSelection} 
           slideOverAction={this.props.hideSlideOver} 
       /> 
      </div> 
     ) 
    } 

} 

function mapStateToProps(state){ 
    return { 
     slideOver: state.slideOver, 
     workshopSelection: state.workshopSelection 
    } 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({ showSlideOver: showSlideOver, hideSlideOver: hideSlideOver }, dispatch); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Academy); 

SlideOverBar：

import React, {Component} from "react"; 
import styles from '../../cssPartials/slideOverBar.css'; 
import SlideOverBarTop from './SlideOverBarTop'; 
import NewWorkshop from './NewWorkshop'; 
import EditWorkshop from './EditWorkshop'; 
import UploadSlides from './UploadSlides'; 
import UploadWorkbook from './UploadWorkbook'; 
import ViewWorkbook from './ViewWorkbook'; 
import UploadResources from './UploadResources'; 
import ViewResources from './ViewResources'; 
import constants from '../../data/constants.js'; 
import {chooseLevel, chooseVenue, chooseUnit, showCourses, dayCounter, chooseTutor, resetWorkshops } from '../../data/actions/actions'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 

class SlideOverBar extends Component { 

    loadContent(testCase){ 
     switch (testCase){ 
      case constants.ADD_WORKSHOP: 
       return <NewWorkshop properties = {this.props} /> 
      case constants.EDIT_WORKSHOP: 
       return <EditWorkshop properties = {this.props} /> 
      case constants.UPLOAD_SLIDES: 
       return <UploadSlides properties = {this.props} /> 
      case constants.UPLOAD_WORKBOOK: 
       return <UploadWorkbook properties = {this.props} /> 
      case constants.VIEW_WORKBOOK: 
       return <ViewWorkbook properties = {this.props} /> 
      case constants.UPLOAD_RESOURCES: 
       return <UploadResources properties = {this.props} /> 
      case constants.VIEW_RESOURCES: 
       return <ViewResources properties = {this.props} /> 
      default: 
       return <div>Uh oh, something went wrong!</div> 
     } 

    } 

    render(){  
     return (
      <div className={this.props.slideOver.visible ? `${styles.slideOverBar} ${styles.visible}` 
            : styles.slideOverBar }> 
       <SlideOverBarTop slideOverAction = {this.props.slideOverAction} 
           reset = {this.props.resetWorkshops} 
           title = {this.props.slideOver.content} /> 
       {this.loadContent(this.props.slideOver.content)} 
      </div> 
     ) 
    } 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators({ chooseLevel, chooseVenue, chooseUnit, showCourses, chooseTutor, resetWorkshops }, dispatch); 
} 


export default connect(null, mapDispatchToProps)(SlideOverBar); 

任何想法？

Answer 1

這是沒有什麼可擔心的。您剛剛看到connect函數使用的HOC Connect。該組件使用下面的整個商店context。這只是對商店的參考而不是複製。

如果您結帳this line of code from connect，您可以看到Connect組件正在拉滿店鋪並將其設置爲其state。

const storeState = this.store.getState() 
this.state = { storeState } 

這允許Connect組分然後與mapStateToProps結合特定store值。但由於您通過null它將默認爲：

const defaultMapStateToProps = state => ({})