Как использовать mapDispatchToProps и Reducers в redux? - PullRequest
Новая
       8

Как использовать mapDispatchToProps и Reducers в redux?

0 голосов
/ 28 мая 2020

это файловое приложение. 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')
);

это редукторы 

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

это файл элемент. 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)

это действие файла. js

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

Ошибка: this.props.todoList .map - это не функция, я хочу добавить новый элемент, когда я нажимаю на кнопку addtodo, а затем отображаю тег h5. и проверьте меня, когда я получу значение из ввода тега, ЭТО ИСТИНА

1 Ответ

1 голос
/ 28 мая 2020

Ваш defaultState - это массив, и вы возвращаете объект в 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 Также вам нужно использовать current для доступа к значению ref 

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