реагировать на избыточность при помощи Axios Api - PullRequest
Новая
       19

реагировать на избыточность при помощи Axios Api

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

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

Все работает, я могу показать задачи и удалить определенные задачи.Однако теперь я начал изучать Redux, и это кажется очень запутанным.

Я не уверен, как позвонить на мой сервер отдыха.После просто возвращается обещание, не уверен, как получить данные, а не обещание.

store.js 

import axios from 'axios'
import { createStore } from 'redux'

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0
export const addTodo = text => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})

export const listTodo = todos => ({
  type: 'LIST_TODO',
  todos
})

const add_todo = (id, text) => {
  return axios.post("http://localhost:5001/todos", {id:id, data:text})
    .then(Response=>{
           store.dispatch(addTodo(Response.data));
    })
}

const fetch_data = () => {
  return axios.get("http://localhost:5001/todos")
        .then(Response=>{
          store.dispatch(listTodo(Response.data))
        })
}
const initialState ={
    todos: {},
    new_todo: ''
}

function todoApp(state = initialState, action) {
    console.log("reducer called...")
    switch (action.type) {
       case ADD_TODO:
        return Object.assign({}, state, {
          new_todo: action.text
        })
      default:
        return state
    }
}

const store = createStore(todoApp)
export default store

app.js 

import React, {Component} from 'react' 
import {connect} from 'react-redux'
class App extends Component{
 render(){
  return(        
      <div>
        <button onClick={this.props.addTodo('testing')}>fetch_Data</button>
      </div>

   );
 }
}

export default connect() (App)

index.js 

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

Ответы [ 3 ]

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

Ты заставляешь эту работу вот так.Вам нужно отправить действие, когда вы получите ответ. 

const fetch_data = () => {
  return axios.get("http://localhost:5001/todos")
    .then(Response=>{
           store.dispatch(addTodo(Response.data));
    })
}

export const addTodo = text => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text: text
})
0 голосов
/ 05 февраля 2019

Во-первых, вы должны экспортировать созданные вами действия, которые затем будут импортированы и использованы в компонентах с помощью подключения HOC.

Вы можете отправить действие fetch_data, чтобы получить данные в вашем компоненте.Также вы можете отправить действие «addTodo», чтобы добавить новый список задач в список. 

export const ADD_TODO = 'ADD_TODO';
export const GET_TODO = 'GET_TODO';

export const fetch_data = () => {
return (dispatch) => axios.get("http://localhost:5001/todos")
    .then(response => {
         dispatch({type: GET_TODO, todos: response.data});
    })
}

export const addTodo = text => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text: text
});

Используйте константы действий, такие как ADD_TODO, GET_TODO, чтобы сохранить или обновить состояние приращения в редукторах 

const todoApp = (state = initialState, action) => {
console.log("reducer called...")
switch (action.type) {
   case ADD_TODO:
      const todos = {...state.todos};
      todos[action.id] = action.text;
      return Object.assign({}, state, {
        todos: todos
      });
   case GET_TODO:
      return Object.assign({}, state, {
        todos: action.todos
      });
   default:
      return state
   }
}

Импорт действий, а затем вызов функции, которую вы добавили в mapDispatchToProps, для отправки действий. 

import React, {Component} from 'react'
import {connect} from 'react-redux';
import { addTodo, fetch_data } from "../store";
class App extends Component{
    render(){
        return(
            <div>
                <button onClick={this.props.addTodo(todoId, 'testing')}>fetch_Data</button>
            </div>

        );
    }
}

const mapStateToProps = (state) => ({
    todos: state.todoApp.todos
});

const mapDispatchToProps = (dispatch) => ({
    addTodo: (id, text) => dispatch(addTodo(id, text)),
    fetch_data: () => dispatch(fetch_data())
});

export default connect(mapStateToProps, mapDispatchToProps)(App);
0 голосов
/ 05 февраля 2019

redux основан на действиях и редукторах, в основном редукторы - это чистые функции, которые не имеют побочных эффектов, как, например, вызовы API, я бы посоветовал вам прочитать больше о redux и как использовать redux с redux-chunk для совершения вызовов API

...