mapStateToProps 返回组件 state 而不是存储 state

Question

I've been learning how to use Redux , and I've come across a problem which I can't quite wrap my head around.

I'm attempting to use the native Redux connect() function in order to pass state and reducers (or dispatchers? I'm not quite 100% on the terminology yet). And everything appeared to be working smoothly until I added an additional slice to the store.

This is the basic layout of my Redux app:

export const playerSlice = createSlice({
    name: "player",
    initialState: {
        stateOne: "",
        stateTwo: "",  
    },
    reducers: myReducers
});

export const tracksSlice = createSlice({
    name: "tracks",
    initialState: {
        stateThree: "" 
    },
    reducers: myReducers
});

class Test extends Component{
    constructor(){
        super();
        this.state = {
            componentStateOne: "",
            componentStateTwo: "",
        };
    }
    // etc...
}

For some reason, when I retrieve the state from the mapStateToProps() function, I retrieve the state for the component Test , and not the state from Redux :

connect(state => {
    // this will return 
    // { componentStateOne: "", componentStateTwo: "" }
    // instead of 
    // { stateOne: "", stateTwo: "", stateThree: "" }
    console.log(state);

    return {
        // etc...
    }
})(Test);

All help is appreciated, cheers.

Answer 1

I think you should change connect section of your code. connect gets two parameters and the fist of those is mapStateToProps.

const mapStateToProps = (state) => {
      //
      return {
      
      };
    };
    
    export default connect(mapStateToProps)(Test);