react-redux的异步action跨域获取数据（中间件thunk以及redux-promise-middleware的使用）

react中跨域获取数据的过程

首先进行跨域的设置
在项目src目录下添加一个setupProxy.js的文件

const proxy = require("http-proxy-middleware");

module.exports = (app) => {
    app.use("/api", proxy({//api是随便写的
        target: "",//这里写要代理的地址必须写
        changeOrigin: true,
        pathRewrite: {
            "^/api": ""//将路径中的api替换掉
        }
    }))
}

这样跨域就可以了

接下来就是创建仓库保存数据了，这里用到了redux、redux-immutable、immutable以及redux-thunk
在src文件夹下创建store文件夹（类似于vue），在store目录下创建index.js
在这个里面使用redux的createStore()方法创建store仓库，里面的参数需要reducers，在这里我们是根据reducers中的state的只读的特点使用了immutable来创建的，他可以保证数据的只读性，如果想要了解immutable中数据的特点可以去看一下他的官网。

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。
处理 Reducer 关系时的注意事项
开发复杂的应用时，不可避免会有一些数据相互引用。建议你尽可能地把 state 范式化，不存在嵌套。把所有数据放到一个对象里，每个数据以 ID 为主键，不同实体或列表间通过 ID 相互引用数据。把应用的 state 想像成数据库。
上代码

import {
    createStore,
    applyMiddleware
} from "redux"; //引入创建仓库和使用中间件的方法
import {combineReducers} from "redux-immutable"//引入合并
import reducersa from "./reducers/a"  
  //引入reducersa.js
import reducersb from "./reducers/b" 
   //引入reducersa.js
import thunk from "redux-thunk"		
//引入thunk中间件处理异步action
import reduxPromiseMiddleware from "redux-promise-middleware"
 //引入redux-promise-middleware中间件处理异步action
//需要注意，以上两个中间件的action的要求不同，在下面以会详细介绍

const reducers = combineReducers({reducersa ,reducersb});
//将两个reducers合并

const store = createStore(reducers, applyMiddleware(reduxPromiseMiddleware));
//创建仓库并使用reducers以及使用中间件
export default store;

reducersa.j
reducersb.js与reducersa的结构一样只是里面的数据不同

import Immutable from "immutable"
//引入immutable对

const defaultState = Immutable.fromJS({
        val:"111"
})

export default (state=defaultState,action)=>{
  //要导出一个纯函数（输入一定，输出也一定）
    switch(action.type){
      // 根据action.type进行数据的操作，返回操作后的新的newState；
    }
    return state;
}

然后就到了页面进行操作的时候了
创建一个页面
在这里使用到了react-redux中的两大组件Provider 以及connect

App.js

import React, { Component } from 'react';
import {Provider} from "react-redux"
//引入provider 属性store会将数据添加到每一个组件中，在组件中通过connect函数获取数据
 import Com_Afrom "./components/Com_A"

import store from "./store"
//引入store

class App extends Component {
  render() {
    return (
      
        

        
        
     
    )
  }
}

export default App;

Com_A.js组件

import React from "react"
import {connect} from "react-redux"
//在组件中引入connect来接受app.js传递的store

import { getData,getData2} from "../store/action/actionCreator"
引入getData以及getData2（这是两个action函数）

class ComA extends React.Component{

    render() {
        let { val} = this.props;
        return (
      			

      				{val}
      			
        )
    }
    componentDidMount() {
        this.props.handleData();
        //调用方法获取数据
    }


}
const mapStateToProps= (state)=>({
        val.getIn(["reducersa","val"])
})
const  mapDispatchToProps=(dispatch)=>({
    handleData() {
        // dispatch(getData());
			第一种方式使用的是redux-thunk直接调用getData(),使用thunk时他会检测到dispatch里面的参数是一个函数然后会在getData函数里面的到两个参数dispatch和getState在里面可以进行派发action，详细看一下actionCreator代码。
			
        getData2(dispatch);
     //   第二种方式使用的是redux-promise-middleware 将dispatch方法传过去，然后在函数里面派发action，详细看一下actionCreator代码。
        }
})
export default connect(mapStateToProps,mapDispatchToProps)(ComA);

ActionCreator.js

import { fetch } from 'whatwg-fetch';

export const getData = () => {
    let action = (data) => ({
        type: "GET_DATA",
        val: data
    });
    //action函数用来创建action
    return (dispatch, getState) => {
        let url = "";
        fetch(url).then((res)=>{
            return res.json();
        }).then((result)=>{
            dispatch(action(result));//派发action
        })
    }
}
export const getData2 =(dispatch)=>{
    dispatch({
    //里面的参数固定，必须是tyoe以及payload而且payload的值是一个promise对象
        type:"GET_DATA",
        payload:new Promise(resolve=>{
                        let url = "";
                        fetch(url).then((res)=>{
                            return res.json();
                        }).then((result)=>{
                            // console.log(result);
                           resolve( result)
                        })
        })
    })
}

最后在reducers里面就可以对数据进行修改了
记得数据类型是immutable类型的
还有一个方法是投机取巧就是在componentDIdMount生命周期里面进行数据的请求然后请求到数据后进行action的派发，over