Получить данные из ввода и перейти в состояние редукции

Question

Простое приложение todo - мне нужно получить входное значение из моего контейнера / компонента и сохранить его в избыточном состоянии.Входное значение хранится в локальном состоянии до тех пор, пока пользователь не нажмет кнопку «добавить».

Моя проблема: как передать это входное значение через диспетчеризацию / действие, а затем извлечь его для моего редукторасправиться с этим.

const mapStateToProps = state => ({
    ...state
})
const mapDispatchToProps = dispatch => ({
    addTodo: () => dispatch(addTodo())
})


class Main extends React.Component {

    state = {
        input: ''
    }

    handleInputChange = (e) => {
        e.preventDefault();
        this.setState({
            input: e.target.value
        })
    }

    addTodo = (e) => {
        this.props.addTodo(this.state.input);
    }

    render() {
        return(
            <div className='Main'>

                <div className='head'>
                    <input onChange={this.handleInputChange} type="text"/>
                    <button onClick={this.addTodo}>Add</button>
                </div>

            </div>
        )
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Main);

Вот действие:

export const addTodo = () => dispatch => {

    dispatch({
     type: 'ADD_TODO',
     payload
    })

}

Вот редуктор:

export default (state = {}, action) => {

    switch (action.type) {
     case 'ADD_TODO':
      return {
       result: action.payload
      }
     default:
      return state
    }

}

Я просто заблудился, как перемещать эти данные для манипуляцииэто с моим редуктором.

Answer 1

В настоящее время вы фактически не передаете свое входное значение в действие.

Вам необходимо изменить как создателя действия, так и функцию mapDispatchToProps на следующее:

export const addTodo = (payload) => dispatch => {

    dispatch({
     type: 'ADD_TODO',
     payload
    })

}

const mapDispatchToProps = dispatch => ({
    addTodo: (input) => dispatch(addTodo(input))
})