Question

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

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);

mapStateToProps根本没有被调用

1 个答案: