无法从 API 加载帖子

Question

我试图使用redux从api中检索post，但它没有从api中加载任何post。它确实加载了我在initialState中创建的伪片段，但没有加载使用api保存在数据库中的帖子。我在尝试从我的api中检索帖子时做错了什么？

我进行api调用的操作文件

import { SAVE_POST, UPDATE_POST, RETRIEVE_POST, HOME_LOADED } from "./types";
import axios from "axios";
export const savePost = ({
snippetId,
snippetDescription,
snippetTitle
}) => async dispatch => {
const config = {
headers: {
"Content-Type": "application/json"
}
};
let snippetData = { snippetId, snippetDescription, snippetTitle };
try {
if (snippetId == null) {
const res = await axios.post(
"/api/save",
JSON.stringify(snippetData),
config
);
snippetData.snippetId = res.data;
dispatch({
type: SAVE_POST,
payload: snippetData
});
} else {
await axios.post("/api/update", JSON.stringify(snippetData), config);
dispatch({
type: UPDATE_POST,
payload: snippetData
});
}
} catch (err) {
console.log(err);
}
};
// Retrieve post
export const retrievePost = snippetId => async dispatch => {
try {
const res = await axios.post(`/api/snippetdata/${snippetId}`);
dispatch({
type: RETRIEVE_POST,
payload: res.data
});
} catch (err) {
console.error(err);
}
};
//Retrieve all the post
export const onLoad = () => async dispatch => {
try {
const res = await axios.post(`/api/mysnippets/`);
dispatch({
type: HOME_LOADED,
payload: res.data
});
} catch (err) {
console.error(err);
}
};

主页，我调用该操作来检索后

import React from "react";
// import axios from "axios";
import { Link } from "react-router-dom";
import { onLoad, setEdit } from "./actions/posts";
import { connect } from "react-redux";
// import { Form } from "../../components/Article";
class Home extends React.Component {
// constructor(props) {
//   super(props);
// }
componentDidMount() {
//Load all the snippets
onLoad(); // this isn't loading the post from server
}
render() {
const { snippets } = this.props;
console.log(this.props);
let view;
if (snippets) {
view = snippets.map(snippet => {
return (
<div className="card my-3" key={snippet.snippetId}>
<div className="card-header">{snippet.title}</div>
<div className="card-body">{snippet.snippetDescription}</div>
<div className="card-footer">
<div className="row">
<button
// onClick={() => this.handleEdit(snippet)}
className="btn btn-primary mx-3"
>
<Link to={`/editor/:${snippet.snippetId}`}>Edit</Link>
</button>
</div>
</div>
</div>
);
});
}
return (
<div className="container">
<div className="row pt-5">
<div className="col-12 col-lg-6 offset-lg-3">
<h1 className="text-center">Snippets</h1>
</div>
</div>
<div className="row pt-5">
<div className="col-12 col-lg-6 offset-lg-3">{view}</div>
</div>
</div>
);
}
}
const mapStateToProps = state => ({
snippets: state.snippets,
snippetData: state.snippetData
});
export default connect(
mapStateToProps,
{ onLoad, setEdit }
)(Home);

reducer.js

import {
SAVE_POST,
UPDATE_POST,
RETRIEVE_POST,
HOME_LOADED
} from "../actions/types";
import { initialState } from "../store";
export default function(state = initialState, action) {
const { type, payload } = action;
switch (type) {
case SAVE_POST:
return {
...state,
snippetData: payload
};
case UPDATE_POST:
return {
...state,
snippetData: payload
};
case RETRIEVE_POST:
return {
...state,
snippetData: payload
};
case HOME_LOADED:
return {
...state,
snippets: payload
};
case "SET_EDIT":
return {
...state,
snippetToEdit: action.snippet
};
default:
return state;
}
}

整个网络应用的代码沙盒

Answer 1

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import posts from "./reducers/posts";
export const initialState = {
snippets: [
{
snippetId: "1",
snippetTitle: "test",
snippetDescription: "test test"
},
{
snippetId: "2",
snippetTitle: "post2",
snippetDescription: "post 2 post2"
}
],
snippetData: {
snippetId: null,
snippetTitle: null,
snippetDescription: null
}
};
const store = createStore(posts, applyMiddleware(thunk));
export default store;

上面是store.js文件，必须使用中间件进行更新。

由于您正在进行网络调用，因此必须使用像redux-thunk这样的中间件来处理异步操作，因为基本的redux-store只允许您进行同步更新，而不允许进行异步更新。这些帮助我们返回一个函数而不是动作。希望这能有所帮助！

//Dispatch function:
export const onLoad = () => {
return async dispatch => {
console.log("dispatched");
try {
const res = axios.post(`/api/mysnippets/`);
dispatch({
type: HOME_LOADED,
payload: res.data
});
} catch (err) {
console.error(err);
}
};
};