Question

我是使用 redux 进行 MERN 堆栈开发的新手，正在尝试从后端获取请求，然后出现错误，下面我分享我的代码，请告诉我哪里错了，或者告诉我编写 redux 的最佳方法。

<块引用>

App.js

import './App.css';
import Todo from './components/Todo';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

import {reducers} from './reducer'

const store = createStore(reducers, compose(applyMiddleware(thunk)));

const App = () => {
  return (
    <Provider store={store}>
      <div className="App">
        <Todo/>
      </div>
    </Provider>

  );
}

export default App;

<块引用>

常量/actionTypes.js

export const ADD_TODO = "ADD_TODO";

<块引用>

actions/todo.js

import { ADD_TODO } from '../constants/actionTypes';
import * as api from '../api/todoApi';

export const addContact = (newTodo) => async (dispatch) => {
    try {
        const { data } = await api.addContact(newTodo)

        dispatch({ type: ADD_TODO, payload: data })
    } catch (error) {
        console.log(error);
    }
}

<块引用>

api/todoApi

import Axios from 'axios';

const url = 'http://localhost:8000/api';

export const addContact = () =>{
   return Axios.post(url);
}

console.log(url);

<块引用>

组件/Todo.js

这是我的 Todo 表单，我在其中编写了 ui 部分

import React, { useState } from 'react';
import {useDispatch} from 'react-redux'
import {addContact} from '../actions/todo';

const Todo = () => {

    const dispatch = useDispatch();
    const [todo, setTodo] = useState("");

    const SubmitForm = (e) => {
        e.preventDefault();
        dispatch(addContact(todo));
        
    }

    return (
        <>
            <div className='container mt-5'>
                <div className="input-group mb-3">
                    <input
                        type="text"
                        className="form-control"
                        placeholder="Add Todo"
                        aria-label="Recipient's username"
                        aria-describedby="basic-addon2"
                        value={todo}
                        onChange={(e) => setTodo(e.target.value)} />
                    <div className="input-group-append">
                        <button className="btn btn-primary" id="basic-addon2" onClick={SubmitForm}>Add Todo</button>
                    </div>
                </div>
            </div>
        </>

    )
}

export default Todo;

错误：请求失败，reactjs 中的状态码为 404

0 个答案: