為什么react-redux創建多個狀態？

Question

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

我正在使用React-Redux來處理我的應用程序狀態。 我已經將名為Academy最高級別組件與mapStateToProps ， mapDispatchToProps等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 。 這只是對存儲的引用，不能復制。

如果您從connect中檢出此代碼行 ，則可以看到Connect組件正在提取完整存儲並將其設置為state 。

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

這樣， Connect組件便可以使用mapStateToProps綁定特定的store值。 但是由於您傳遞的是null ，因此默認為：

const defaultMapStateToProps = state => ({})