如何在 redux 中发出 AJAX 请求 [英] How to make AJAX request in redux

问题描述

据我所知，我必须在创建过程中编写请求.如何在行动中使用承诺来提交请求?我正在获取数据.然后在reducer中创建新状态.在连接中绑定动作和减速器.但是我不知道如何使用promise进行请求.

行动

import $ from 'jquery';export const GET_BOOK = 'GET_BOOK';导出默认函数 getBook() {返回 {类型:GET_BOOK，数据:$.ajax({方法:获取"，url: "/api/data",数据类型:json"}).成功(功能(数据){返回数据；})};}

减速器

从'../actions/books'导入{GET_BOOK}；const booksReducer = (state = initialState, action) =>{开关(动作.类型){案例 GET_BOOK:返回状态；默认:返回状态；}};导出默认booksReducer；

容器如何在容器中显示数据?

import React, { Component, PropTypes } from 'react';从'react-redux'导入{连接}；从 '../actions/books' 导入 getBook；从镭"导入镭；从反应路由器"导入{链接}；函数 mapStateToProps(state) {返回 {书籍:state.data.books，};}函数 mapDispatchToProps(dispatch) {返回 {getBooks: () =>调度(getBook())，};}@镭@connect(mapStateToProps, mapDispatchToProps)类booksPage扩展组件{静态 propTypes = {getBooks: PropTypes.func.isRequired,书籍:PropTypes.array.isRequired，};使成为() {const {books} = this.props;返回 (<div><Link to={`/authors`}><MUIButton style="flat">所有作者</MUIButton></Link><ul>{books.map((book, index) =><li key={index}><链接到={`/book/${book.name}`}><MUIButton style="flat"><div class="mui--text-black mui--text-display4">;{book.name}"</div></MUIButton></Link><链接到={`/author/${book.author}`}><MUIButton style="flat"><div class="mui--text-black mui--text-display4">;{book.author}</div></MUIButton></Link>)}

);}}导出默认书籍页面；

解决方案

既然你已经在使用 redux，你可以应用 redux-thunk 中间件，它允许你定义异步操作.

安装&用法:Redux-thunk

导出函数 fetchBook(id) {返回调度 =>{调度(setLoadingBookState())；//显示加载微调器fetch(`/book/${id}`, (response) => {dispatch(doneFetchingBook());//隐藏加载微调器如果(响应.状态== 200){dispatch(setBook(response.json));//使用普通函数设置接收状态}别的 {调度(一些错误)}})}}功能集书(数据){返回{类型:'SET_BOOK'，数据:数据}；}

For all I know, I have to write request in action create. How to use a promise in action for submitting a request? I am getting data in action. Then new state is created in reducer. Bind action and reducer in connect. But I don't know how to use promise for request.

Action

import $ from 'jquery';
export const GET_BOOK = 'GET_BOOK';

export default function getBook() {
  return {
    type: GET_BOOK,
    data: $.ajax({
      method: "GET",
      url: "/api/data",
      dataType: "json"
    }).success(function(data){
      return data;
    })
  };
}

Reducer

import {GET_BOOK} from '../actions/books';

const booksReducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_BOOK:
      return state;
    default:
      return state;
  }
};

export default booksReducer;

Container How display data in container?

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import getBook  from '../actions/books';
import Radium from 'radium';
import {Link} from 'react-router';

function mapStateToProps(state) {
  return {
    books: state.data.books,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    getBooks: () => dispatch(getBook()),
  };
}

@Radium
@connect(mapStateToProps, mapDispatchToProps)
class booksPage extends Component {
  static propTypes = {
    getBooks: PropTypes.func.isRequired,
    books: PropTypes.array.isRequired,
  };

  render() {
    const {books} = this.props;
    return (
      <div>
        <Link to={`/authors`}><MUIButton style="flat">All Authors</MUIButton></Link>
        <ul>
          {books.map((book, index) =>
            <li key={index}>
              <Link to={`/book/${book.name}`}><MUIButton style="flat"><div class="mui--text-black mui--text-display4">
                "{book.name}"</div></MUIButton></Link>
              <Link to={`/author/${book.author}`}><MUIButton style="flat"><div class="mui--text-black mui--text-display4">
                {book.author}</div></MUIButton></Link>
            </li>
          )}
        </ul>
      </div>
    );
  }
}

export default booksPage;

解决方案

Since you are already using redux you can apply redux-thunk middleware which allows you to define async actions.

Installation & usage: Redux-thunk

export function fetchBook(id) {
 return dispatch => {
   dispatch(setLoadingBookState()); // Show a loading spinner
   fetch(`/book/${id}`, (response) => {
     dispatch(doneFetchingBook()); // Hide loading spinner
     if(response.status == 200){
       dispatch(setBook(response.json)); // Use a normal function to set the received state
     }else { 
       dispatch(someError)
     }
   })
 }
}

function setBook(data) {
 return { type: 'SET_BOOK', data: data };
}

这篇关于如何在 redux 中发出 AJAX 请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！