Estoy haciendo una aplicación básica de selección de canciones usando reaccionar y redux, pero tengo algunos problemas. En la función mapStateToProps() en mi componente de lista de canciones, el argumento de estado, pasado, generalmente obtiene un valor. Pero cuando intento registrar accesorios en el componente, obtengo un valor indefinido.

índice.js

 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import {Provider} from 'react-redux' import {createStore} from 'redux' import reducers from './reducers' const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <Provider store={createStore(reducers)}> <App /> </Provider> </React.StrictMode> );

Acción

 export const selectSong = (song) => { return { type: 'SELECT_SONG', payload: song } }

reductores

 import { combineReducers } from 'redux' const songReducer=()=>{ return [ {title: 'El Sawarekh ft. Zuksh & Shehta Karika – Ekhwaty' ,duration:'3:50'}, {title: 'Sherine – Masha'er' ,duration:'4:00'}, {title: 'Hala Al Turk – Zahgana' ,duration:'2:54'}, {title: 'Hamza Namira – Dari Ya Alby' ,duration:'5:00'}, ] } const selectedSongReducer=(selectedSong=null,action)=>{ if(action.type==='SELECT_SONG'){ return action.payload } return selectedSong } export default combineReducers({ song:songReducer, selectedSong:selectedSongReducer })

SongList.js

 import React, { Component } from 'react' import {connect} from 'react-redux' class SongList extends Component { render() { console.log(this.props) //First console => undefined return ( <div>SongList</div> ) } } const mapStateToProps =state=>{ console.log(state) //Second console => Array(4) return {songs: state.songs} } export default connect(mapStateToProps)(SongList)