我的mapStateToProps没有将props传递给组件

我是Redux开发中的新手 . 刚开始两天前

以前，我使用道具 - 状态模式，但我要改变状态的一些部分 - 道具模式到Redux .

首先，我将展示我的代码 . index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import ItemList from './itemList';
import SearchList from './searchList';
import {Provider,connect} from 'react-redux';
import {store} from './storeReducer';
import {backToMain} from './reduxAction';
class App extends React.Component{
    // not important some codes 
    render(){
        return(
            <div> 
                <section id="Search">
                    <form  action="//localhost:80/ReactStudy/travelReduxApp/public/server/itemList.php" id="Search" className="search" method="GET" onSubmit={this.submitForm}>
                        <input ref={'search'} placeholder="search country, attraction names" type="text" name="search"/>
                        <button type="submit">SEARCH</button>
                    </form>

                    <p className={this.state.validateError.display}>
                        {this.state.validateError.type=='invalid value'?
                            'Only english letters are available in this input'
                        : (this.state.validateError.type=='not found')?
                            'Nothing was found with this keyword. Try again'
                        :'Empty text field'
                        }

                    </p>
                </section>
                <ItemContainer initializeSearch={this.initializeSearch} searchList={this.state.searchItem}/>
            </div>
        )
    }
}

class ItemContainer extends React.Component{
    state={
        viewMain:true
    }
   //some codes
    showMain=()=>{
        this.setState({
            viewMain:true
        })
        this.props.initializeSearch();
        store.dispatch(backToMain());
    }

    render(){
        console.log('Item container');
        console.log(this.props);
        return(
            <section id="ItemContainer">
                {
                    this.props.searchList!=''?
                        <SearchList searchList={this.props.searchList} mainVisible={this.state.viewMain}/>
                    :
                        <ItemList toggleView={this.toggleView} mainVisible={this.state.viewMain}/>
                }
                <button onClick={this.showMain}>Back to main</button>
            </section>
        )
    }
}

const mapStateToProps =(state)=>{
    console.log('working');  //it doesn't show it.
    return{
        visible:state.visible
    }
};
const wrappedSearchList = connect(mapStateToProps,null)(ItemContainer);
const Root = () => (
    <Provider store={store}>
        <App/>
    </Provider>
);
ReactDOM.render(
    <Root/>,
    document.getElementById('App')
)

reduxAction.js

export function backToMain(){
        return{
            type:'BACK_TO_MAIN'
        }
    }

storeReducer.js

import {createStore} from 'redux';
import {backToMain} from './reduxAction';


export const initialState = {
    visible:true
}
export const store = createStore(viewMainReducer,initialState);
export function viewMainReducer(state=initialState,action){
    switch(action.type){
        case 'BACK_TO_MAIN':
            console.log('Back..');
            return{
                ...state,
                visible:true
            }
            break;
        default: return state;
    }
}

我真的是Redux中的新手所以也许我完全不了解官方文档，但我知道mapStateToProps必须将状态作为道具传递给组件 . 在我的例子中，组件应该是ItemContainer组件 .

问题是渲染ItemContainer组件时 . 如果我查一下

console.log(this.props)

在ItemContainer的render方法中，在控制台中我看到只有initializeSearch和searchList被传递给组件 . 我无法弄清楚为什么我的initialState对象的visible属性没有传递给组件 . 可能是什么原因？我应该怎么做才能将visible属性传递给ItemContainer组件？

React / Redux: mapStateToProps not actually mapping state to props

读这个帖子，但我只是不明白......