Javascript Api未使用react redux命中

user.js

user.js

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
   }
  }

rootReducer.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

store.js

  import  { combineReducers } from 'redux'
  import BlogReducer from './reducer/blog'

 const rootReducer = combineReducers({
  blog: BlogReducer
 });

 export default rootReducer

index.js

import { createStore, applyMiddleware } from 'redux'
import rootReducer from './rootReducer'
import thunk from 'redux-thunk';

const store = createStore(
 rootReducer,
 applyMiddleware(thunk)
);

export default store

---

我正在尝试使用react redux获取数据，但API未命中。我是redux新手，只是想做一个项目，但API并没有使用它。我不知道我遗漏了什么，我还在index.js中提供了提供者存储。任何帮助都将不胜感激

您制作的

thunk

应该返回一个异步函数（也称为返回承诺的函数）

您刚刚错过了返回的

函数fetchBlog（）{
返回功能（调度）{
分派（someAction（））；
返回axios.get（）
.然后（（）=>{
调度（setAction（））；
})
.catch（错误=>{
分派（onErrorAction（））；
});
}
}

也可以使用异步/等待函数

函数fetchBlog（）{ 返回异步（调度）=>{ 试一试{ 分派（someAction（））； const res=等待axios.get（）； 调度（setAction（{res}））； }捕获（错误）{ 分派（onErrorAction（））； } } } 此外，在dispatch to props函数中，您不需要使用dispatch调用它，因为

thunk中间件

将操作理解为函数，它将执行它，所以您只需要引用

thunk

本身，就可以了

const mapDispatchToProps=dispatch=>{
返回{
fetchBlog:fetchBlog
}
}

或者更好，只使用一个对象

const mapDispatchToProps={
fetchBlog:fetchBlog
}

或者你可以

const mapDispatchToProps={
获取博客
}

---

哪一个更简单

我假设

dispatch（fetchBlogRequest（））

也没有进入存储区（这段代码是否被调用？）？此外，由于您是ReDux的新手，所以我建议您使用“<代码> USES选择器< /代码>和<代码>使用Debug <代码>代替MAP函数，使代码更加简洁和干净。b） 查看Redux工具包，为您省去很多Redux的麻烦。是否有任何错误？组件没有显示任何阻止其分派操作的内容，可能是您忘记了提供程序或thunk中间件？控制台中没有错误。我发现您正在映射到分派功能中分派，因此我为您更新了答案；）

import { createStore, applyMiddleware } from 'redux'
import rootReducer from './rootReducer'
import thunk from 'redux-thunk';

const store = createStore(
 rootReducer,
 applyMiddleware(thunk)
);

export default store

export * from './actions/blog'