Javascript 使用react redux在单个文件中获取数据

blogById action.js

import axios from 'axios'

export const fetchBlogsById = (id) => {
 return (dispatch) => {
  dispatch(fetchBlogsRequestById(id))
  axios
  .get(`http://localhost:3001/api/blog/get/${id}`)
  .then(response => {
    const blogs = response.data.data
    dispatch(fetchBlogsByIdSuccess(blogs))
  })
  .catch(err => {
      dispatch(fetchBlogsByIdFailure(err))
  })
 }
};

export const fetchBlogsRequestById = (id) => {
 return {
  type: 'FETCH_BLOG_REQUEST_BY_ID',
  id
  }
 }

 export const fetchBlogsByIdSuccess = blogs => {
  return {
   type: 'FETCH_BLOGS_SUCCESS_BY_ID',
   payload: blogs
   }
 }

 export const fetchBlogsByIdFailure = error => {
  return {
   type: 'FETCH_BLOGS_FAILURE_BY_ID',
   payload: error
  }
 }

blog action.js

import axios from 'axios'

export const fetchBlogs = () => {
 return (dispatch) => {
 dispatch(fetchBlogsRequest())
 axios
  .get('http://localhost:3001/api/blog/get')
  .then(response => {
    const blogs = response.data.data
    dispatch(fetchBlogsSuccess(blogs))
  })
  .catch(error => {
    dispatch(fetchBlogsFailure(error.message))
  })
 }};

 export const fetchBlogsRequest = () => {
  return {
   type: 'FETCH_BLOGS_REQUEST'
  }
 }

 export const fetchBlogsSuccess = blogs => {
  return {
   type: 'FETCH_BLOGS_SUCCESS',
   payload: blogs
   }
  }

 export const fetchBlogsFailure = error => {
  return {
   type: 'FETCH_BLOGS_FAILURE',
   payload: error
  }
 }

blogReducer.js

const initialState = {
 loading: false,
 blogs: [],
 error: ''
}

const fetchReducer = (state = initialState, action) => {
 switch (action.type) {
  case 'FETCH_BLOG_REQUEST_BY_ID':
    return {
      ...state,
      loading: true,
      id: action.id
    }
  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 fetchReducer

import  { combineReducers } from 'redux'
import blogReducer from './reducer/blog'
import blogReducerById from './reducer/blogById'

const rootReducer = combineReducers({
 blog: blogReducer,
 blogById:  blogReducerById
});

export default rootReducer

blogById reducer.js

const initialState = {
 loading: false,
 blogs: [],
 error: ''
}

const fetchByIdReducer = (state = initialState, action) => {
 switch (action.type) {
  case 'FETCH_BLOG_REQUEST_BY_ID':
    return {
      ...state,
      loading: true,
      id: action.id
    }
  case 'FETCH_BLOGS_SUCCESS_BY_ID':
    return {
      loading: false,
      blogs: action.payload,
      error: ''
    }
  case 'FETCH_BLOGS_FAILURE_BY_ID':
    return {
      loading: false,
      blogs: [],
      error: action.payload
    }
  default: return state
 }
}

export default fetchByIdReducer

index.js

export { fetchBlogs} from './actions/blog'
export { fetchBlogsById } from './actions/blogById'

rootReducer.js

const initialState = {
 loading: false,
 blogs: [],
 error: ''
}

const fetchReducer = (state = initialState, action) => {
 switch (action.type) {
  case 'FETCH_BLOG_REQUEST_BY_ID':
    return {
      ...state,
      loading: true,
      id: action.id
    }
  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 fetchReducer

import  { combineReducers } from 'redux'
import blogReducer from './reducer/blog'
import blogReducerById from './reducer/blogById'

const rootReducer = combineReducers({
 blog: blogReducer,
 blogById:  blogReducerById
});

export default rootReducer

---

它的工作很好，但我希望它在单一行动和减缩文件目前我使用两个不同的文件一个用于获取所有博客和一个用于获取单一id的博客。我可以在一个文件中使用这两个文件吗？当我在单个文件中使用它时，它重叠，而获取id它提供了所有博客，有时它工作良好。我是一个新的反应redux。感谢您的帮助

为什么会出现“按ID获取日志请求”：在您的bolgsReducer文件中返回{…状态，加载：true，ID:action.ID}？@MohammadFaisal，我之前使用过，现在已经发表了评论