Реагировать Redux, как передать данные из ввода в остальные API - PullRequest
Новая
       5

Реагировать Redux, как передать данные из ввода в остальные API

0 голосов
/ 07 февраля 2019

Я пытаюсь научиться реагировать на избыточность, и я создаю небольшое приложение todo, которое имеет бэкэнд как REST-сервер

, большая часть которого реализована, однако я не могупонять, как передать значение из моего поля ввода для вызова остальных API.Я могу успешно сохранить значение inputbox в избыточном состоянии.

Я использую реагирующее соединение в качестве промежуточного программного обеспечения для обработки вызовов API.

контейнер 

import { connect } from 'react-redux'
import {toggleAddTodoDialog, addNewTodo, handleChange} from '../actions'
import AddTodoDialog from '../components/add_todo_dialog';
class AddTodoContainer extends Component {
    render() {
        return (
            <div>
                <AddTodoDialog toggleAddTodoDialog={this.props.toggleAddTodoDialog} 
                addNewTodo = {this.props.addNewTodo}
                newTodoList = {this.props.newTodoList}
                handleChange = {this.props.handleChange}
                is_add_todo_dialog_opened={this.props.is_add_todo_dialog_opened}/>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return state
}

const bindActionsToDispatch = dispatch => 
(
  {
    toggleAddTodoDialog : (e) => dispatch(toggleAddTodoDialog(e)),
    handleChange: (e) => dispatch(handleChange(e)),
    addNewTodo : (e) => addNewTodo(e)
  }
)

export default connect(mapStateToProps, bindActionsToDispatch)(AddTodoContainer)

компонент 

export default class AddTodoDialog extends Component {

    toggleAddTodoDialog = (e) => {
        this.props.toggleAddTodoDialog(!this.props.is_add_todo_dialog_opened)
    }

    addNewTodo = (e) => {
        this.props.addNewTodo()
        this.toggleAddTodoDialog(e)
    }

    handleChange = (e) => {
        this.props.handleChange(e)    
    }

    render() {
        return (
            <div>
                <Button color="primary" onClick={this.toggleAddTodoDialog}>Add new Todo</Button>
                <Modal isOpen={this.props.is_add_todo_dialog_opened} >
                    {/* <Modal isOpen={false} > */}
                    <ModalHeader toggle={this.toggleAddTodoDialog}>Modal title</ModalHeader>
                    <ModalBody>
                        <FormGroup >
                            <Label for="Title">Task </Label>
                            <Input name="task"
                                value={this.props.newTodoList.task}
                                onChange={this.handleChange} />

                        </FormGroup>
                    </ModalBody>
                    <ModalFooter>
                        <Button color="primary" onClick={this.addNewTodo}>OK</Button>{' '}
                        <Button color="secondary" onClick={this.toggleAddTodoDialog}>Cancel</Button>
                    </ModalFooter>
                </Modal>

            </div>
        );
    }

действия 

export function addNewTodo() {
  console.log("addNewTodo")
  return function (dispatch) {
    axios.post("http://localhost:5001/todos", 'task=' + this.props.addNewTodo.task)
      .then(response => {
        dispatch(_addTodoAction(response.data))
      })
  }
}

export function _addTodoAction(todos) {
  console.log("_addTodoAction")
  return {
    type: 'ADD_TODO',
    todos: todos
  }
}

export function handleChange(event){
  console.log("handleChange "+event)
  return{
    type: 'HANDLE_CHANGE',
    event: event
  }
}

редуктор 

case 'ADD_TODO':
    console.log(action)
    return {
        ...state,
        todos: action.todos
    }

1 Ответ

0 голосов
/ 07 февраля 2019

Вы отправляете так: 

addNewTodo : (e) => addNewTodo(e)

Но ваше действие не принимает никаких аргументов: 

export function addNewTodo() {
  console.log("addNewTodo")
  return function (dispatch) {
    axios.post("http://localhost:5001/todos", 'task=' + this.props.addNewTodo.task)
      .then(response => {
        dispatch(_addTodoAction(response.data))
      })
  }
}

Если вы хотите значение входного значения: 

handleChange = (e) => {
    this.props.handleChange(e.target.value)    
}

А затем отправка: 

handleChange: (value) => dispatch(handleChange(value)),

А затем в действии: 

export function handleChange(value) {
...
...