Api没有使用react redux进行击球

Question

user.js

import React, { useEffect } from 'react';
import { fetchBlog } from '../../redux';
import { connect } from 'react-redux'
const Home = ({ blogData, fetchBlog }) => {
const { id } = useParams();
useEffect(() => {
fetchBlog();
}, []);
return (
<>
<div className="container">
<div className="col-lg-10">
<h2> React CRUD Operation </h2>
</div>
<div className="col-lg-2">
<Link to="/add" >
<button> Add Blog </button>
</Link>
</div>
<table className="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Picture</th>
<th>Title</th>
<th>Short Description</th>
<th>Author</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{blogData.map((it) => {
return (
<tr key={it.id}>
<td> {it.id} </td>
<td> {<img src={it.pic} alt="not available" />} </td>
<td> {it.title} </td>
<td> {it.short_desc} </td>
<td> {it.author} </td>
})}
</tbody>
</table>

</>
)
}
const mapStateToProps = state => {
return {
blogData: state.blog
}
}
const mapDispatchToProps = dispatch => {
return {
fetchBlog: () => dispatch(fetchBlog())
}
}
export default connect (
mapStateToProps,
mapDispatchToProps
) (Home)

userAction.js从"axios"导入axios

export const fetchBlog = () => {
return (dispatch) => {
dispatch(fetchBlogRequest())
axios
.get('http://localhost:3001/api/blog/get')
.then(response => {
const blog = response.data
dispatch(fetchBlogSuccess(blog))
})
.catch(error => {
// error.message is the error message
dispatch(fetchBlogFailure(error.message))
})
}
}
export const fetchBlogRequest = () => {
return {
type: 'FETCH_BLOGS_REQUEST'
}
}
export const fetchBlogSuccess = blogs => {
return {
type: 'FETCH_BLOGS_SUCCESS',
payload: blogs
}
}
export const fetchBlogFailure = error => {
return {
type: 'FETCH_BLOGS_FAILURE',
payload: error
}
}

user reducer.js

const initialState = {
loading: false,
blogs: [],
error: ''
}
const BlogsReducer = (state = initialState, action) => {
switch (action.type) {
case 'FETCH_BLOGS_REQUEST':
return {
...state,
loading: true
}
case 'FETCH_BLOGS_SUCCESS':
return {
loading: false,
blogs: action.payload,
error: ''
}
case 'FETCH_BLOGS_FAILURE':
return {
loading: false,
blogs: [],
error: action.payload
}
default: return state
}
}
export default BlogsReducer

rootReducer.js

import  { combineReducers } from 'redux'
import BlogReducer from './reducer/blog'
const rootReducer = combineReducers({
blog: BlogReducer
});
export default rootReducer

store.js

import { createStore, applyMiddleware } from 'redux'
import rootReducer from './rootReducer'
import thunk from 'redux-thunk';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
export default store

index.js

export * from './actions/blog'

我正在尝试使用react-redux获取数据，但API没有命中。我是redux的新手，只是想做一个项目，但API并没有使用它。我不知道我错过了什么，我也在index.js中提供了提供商商店。任何帮助都将感谢

Answer 1

您创建的fetchBlog的thunk应该返回一个异步函数(也称为返回promise的函数(

你刚刚错过了return

function fetchBlog(){
return function(dispatch){
dispatch(someAction());
return axios.get()
.then(() => {
dispatch(setAction());
})
.catch(error => {
dispatch(onErrorAction());
});
}
}

或者您可以使用异步/等待功能

function fetchBlog(){
return async (dispatch) => {
try{
dispatch(someAction());
const res = await axios.get();
dispatch(setAction({ res }));
}catch(error){
dispatch(onErrorAction());
}
}
}

此外，在dispatch-to-props函数中，您不需要用dispatch调用它，因为thunk-middleware将操作理解为函数，它会执行它，所以您只需要引用thunk本身，就可以准备好

const mapDispatchToProps = dispatch => {
return {
fetchBlog: fetchBlog
}
}

或者更好，只需使用对象

const mapDispatchToProps = {
fetchBlog: fetchBlog
}

或者你可以

const mapDispatchToProps = {
fetchBlog
}

这是更简单的