Question

我的目标是基本上在react-redux中执行基本的GET请求。我知道如何使用POST而不是使用GET，因为没有触发操作的事件。

继承人的行动准则

export function getCourses() {
  return (dispatch) => {

    return fetch('/courses', {
      method: 'get',
      headers: { 'Content-Type': 'application/json' },
    }).then((response) => {
      if (response.ok) {
        return response.json().then((json) => {
          dispatch({
            type: 'GET_COURSES',
            courses: json.courses
          });
        })
      }
    });
  }
}

我在哪里触发此操作来获取数据？在组件？

import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { getCourses } from '../actions/course';


class Course extends React.Component {

  componentDidMount() {
      this.props.onGetCourses();
  }

  allCourses() {
    console.log(this.props.onGetCourses());
      return this.props.courses.map((course) => {
        return(
          <li>{ course.name }</li>
        );
      });

      return this.props
  }

  render() {
    return (
      <div>
        <ul>
          { this.allCourses() }
        </ul>

      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    courses: state.course.courses
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onGetCourses: () => dispatch(getCourses)
  }
}

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

我尝试了这个，但它不起作用。

课程缩减器

const initialState = {
    courses: []
};



export default function course(state= initialState, action) {

  switch (action.type) {
    case 'GET_COURSES':
      return Object.assign({}, state, {
        courses: action.courses
      })
    default:
      return state;
  }


}

Answer 1

首先，onGetCourses: () => dispatch(getCourses)应更改为onGetCourses: () => dispatch(getCourses())（您需要实际调用动作创建者）。

当谈到应该调用动作的位置时，在componentDidMount中完成此操作绝对没问题。正如您所做的那样。

Answer 2

如果你没有注意到，你的allCourses（）中有两个回复。
我的代码库中有类似的代码，但是我没有在fetch和response.json（）之前使用return，因为该函数应该返回action对象。

我如何在react-redux中正确执行GET请求？

2 个答案: