Redux进阶(四)：巧用Redux-thunk 中间件，异步请求数据不再愁！

2022-11-04 04:49:24

Redux-Thunk：Redux新手实现异步请求的利器

Redux-Thunk简介

Redux-Thunk是一个Redux中间件，允许你在Redux action中返回一个函数而不是普通对象。这个函数可以执行异步操作，例如发起AJAX请求，并在请求完成后分发另一个action。

安装和配置Redux-Thunk

安装Redux-Thunk：

npm install redux-thunk

配置Redux-Thunk：

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

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

使用Redux-Thunk实现AJAX请求

创建action creator

import axios from 'axios'

export const fetchPosts = () => {
  return async (dispatch) => {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts')
    dispatch({ type: 'FETCH_POSTS', payload: response.data })
  }
}

使用action creator

import { useDispatch } from 'react-redux'
import { fetchPosts } from './actions'

const Posts = () => {
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(fetchPosts())
  }, [])

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h1>{post.title}</h1>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  )
}