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。

更新

以下是每个组件的完整代码。

学院：

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组件随后将特定store值绑定到mapStateToProps。但是，由于您要传递null，因此默认为：

const defaultMapStateToProps = state => ({})

为什么react-redux会创建多个状态？

1 个答案: