redux中如何使用mapDispatchToProps和Reducers？

Question

this is file app.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import reducers from './reducers'

const store = createStore(reducers)
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

this is reducers

let defaultState = []
export default function reducer(state = defaultState, action){
   switch(action.type){
       case 'ADD_TODO':
           return {
               defaultState : [...state, action.text] 
           }
       default:
           return state
   }
}

this is file item.js

.......
import addTodo from './action'
class Item extends Component {
    constructor(){
        super()
        this.inputRef = createRef()
    }
    render() { 
        return (
        <>
            <input ref = {this.inputRef} type = 'text'></input>
            <button onClick = {() => this.props.add(this.inputRef.current.value)} type= 'button' >Add Todo</button> 
            {this.props.todoList.map(item => <h5>{item}</h5>) } 
            {/* this is error */}
        </>
        );
    }
}

const mapStateToProps = (state) => {
    return {
      todoList : state
    }
}
const mapDispatchToProps = (dispatch) => {
   return {
    add : (text) => dispatch(addTodo(text))
   }
}
export default connect(mapStateToProps,mapDispatchToProps)(Item)

this is file action.js

const ADD_TODO = 'ADD_TODO'
 const addToto = (text) => {
    return {
        type : ADD_TODO,
        text
    }
}
export default addToto;

Error: this.props.todoList.map is not a function i want to add new item when i onClick in button addtodo then display on tag h5. and check for me when i get value from tag input, IT's TRUE

Answer 1

Your defaultState is an array and you are returning object in ADD_TODO .

Fix

let defaultState = []
export default function reducer(state = defaultState, action){
   switch(action.type){
       case 'ADD_TODO':
           return [...state, action.text] //<---- see here
       default:
           return state
   }
}

Edit Also you need to use current to access the value of ref

<button onClick = {() => this.props.add(this.inputRef.current.value)} type= 'button' >Add Todo</button>