componentes/App.js

 import React from 'react'; import { connect } from 'react-redux' import { add_task } from '../actions/index'; class App extends React.Component { state = { text: '', time: '' } render_tasks = () => { const { tasks } = this.props return ( <table> <tbody> {tasks.map(task => { return ( <tr key={task.id}> <td>{task.text}</td> <td>{task.time}</td> </tr> ) }) } </tbody> </table> ) } render() { console.log('App props', this.props) return ( <div className="App"> <input type='text' onChange={(e) => this.setState({ text: e.target.value })} /> <input type='time' onChange={(e) => this.setState({ time: e.target.value })} /> <button onClick={() => this.props.add_task( this.state.text, this.state.time)}> Add </button> {this.render_tasks()} </div> ); } } function mapStateToProps(state) { return { tasks: state } } function mapDispatchToProps(dispatch) { return { add_task : () => dispatch(add_task()) } } export default connect(mapStateToProps, mapDispatchToProps)(App);

acciones/index.js

 import { ADD_TASK } from './../types'; export const add_task = (text, time) => { const action = { type: ADD_TASK, text, time } console.log('Add action', action) return action }

reductores/index.js

 import { ADD_TASK } from './../types'; const tasks = (state=[], action) => { let tasks = []; if (action.type === ADD_TASK) { tasks = [...state, { text: action.text, time: action.time, id: Math.random() }] console.log('Data from reducer', tasks) return tasks } else { return state } } export default tasks;

Cuando hago clic en el botón, espero obtener una tabla con la información que ingresé en los campos de entrada, pero no aparece nada, intenté reemplazar la parte de la tabla en la función render_tasks en App.js con una lista desordenada y el mapa devuelve un elemento de lista que incluye 2 abarca uno para el texto y el otro para la hora, ¡pero todo lo que obtuve es el punto del elemento de la lista!