使用 redux-thunk 中间件获取数据

Question

我正在学习使用 redux-thunk 的 react-redux 异步操作，我想从 API（我的本地数据库）中获取数据，不幸的是，使用 redux-thunk 中间件获取数据未获取数据但没有thunk 中间件数据被获取。

这里是带有 thunk 中间件的动作创建器，它不起作用

// retriev comments
export const fetchComments= () =>{
  return dispatch =>{
    dispatch(fetchCommentsRequest);
    axios.get('/api/v1/todo')
    .then(response =>{
      const comments =response.data;
      dispatch(fetchCommentsSucces(comments))
    })
    .catch(error =>{
      const erroMsg =errors.messages
      dispatch(fetchCommentsFailure(error))
    })
  }
}

这里是控制台日志结果：

这是一个组件，我在其中调用函数以从 API、

获取数据

import React, {useEffect}from 'react'
import { fetchComments} from '../store/actions'
import { connect } from "react-redux";

function Dashboard(userComments) {

  useEffect(() =>{
    fetchComments();
  }, [])

  return (
    <div>
        <p>Fetching data</p>
    </div>
  )
}

const mapStateToProps = state => {
  console.log("I am state", state);
  return {
    isAuthenticated: state.Auth.isAuthenticated,
    user: state.Auth.user,
    userComments: state.comments
  };
};

const mapDispatchToProps = dispatch => {
  return {
    fetchComments: () => dispatch(fetchComments()),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

整个商店可以在这里找到：store

谁能告诉我为什么没有获取到数据？

Answer 1

在你的 thunk 中，正确地调度动作，即调用 fetchCommentsRequest 函数（你正在提供参考）


export const fetchComments= () =>{
  return dispatch =>{
    dispatch(fetchCommentsRequest()); //<-----call the fuction
    axios.get('/api/v1/todo')
    .then(response =>{
      const comments =response.data;
      dispatch(fetchCommentsSucces(comments))
    })
    .catch(error =>{
      const erroMsg =errors.messages
      dispatch(fetchCommentsFailure(error))
    })
  }
}

在你的代码库中，fetchCommentsSucces 需要一个参数。

export function fetchCommentsSucces(comments){ //<----pass argument i.e comments
  console.log('success')
  return{
    type: ActionTypes.FETCH_COMMENTS_SUCCESS,
    payload: comments //<----provide correct payload  
  }
}

Answer 2

fetchComments 方法在 <Dashboard> 组件中的调用方式存在问题。

一旦 React 组件连接到 Redux 存储，存储中的数据 (mapStateToProps) 和它可用于将操作分派到存储的函数 (mapDispatchToProps) 将传递给该组件作为一个对象。

<Dashboard> 组件接收这个 props 对象，可以在其中像这样访问：

function Dashboard(props) {

  useEffect(() =>{
    props.fetchComments();
  }, [])

  return (
    <div>
        <p>Fetching data</p>
    </div>
  )
}

或使用destructuring:

function Dashboard({ isAuthenticated, user, userComments, fetchComments }) {

  useEffect(() =>{
    fetchComments();
  }, [])

  return (
    <div>
        <p>Fetching data</p>
    </div>
  )
}

使用 redux-thunk 中间件获取数据

Fetching data with redux-thunk middle ware

javascript

reactjs

redux

redux-thunk