mapStateToProps根本没有被调用

Question

我正在尝试使用mapStateToProps创建一个订阅商店的容器.我能够以这种方式使用reducer更改状态

export default function firstReducer(state={}, action) {
    switch(action.type){
        case 'ADD_USERNAME':
            return Object.assign({}, state, {
                username: action.payload
            });
        default:
            return state;
    }
}

但是,mapStateToProps甚至不会被调用一次.我哪里错了

export default class myComponent extends React.Component{
   render(){
       return(
            <h1>this.props.userName</h1>
       )
   }
}

function mapStateToProps(state){
    console.log("Hey");
    return{
        userName: state.username
    };
}

export const myContainer = connect(mapStateToProps, null)(myComponent);

Answer 1

你需要照顾的两件事

首先让组件名称不是大写字母,然后从组件中删除导出默认值,否则当您将默认导入它时,您将不会使用已连接存储的组件

class MyComponent extends React.Component{
   render(){
       return(
            <h1>this.props.userName</h1>
       )
   }
}

function mapStateToProps(state){
    console.log("Hey");
    return{
        userName: state.username
    };
}

export default connect(mapStateToProps, null)(MyComponent);