FetchAction

Quickly create AJAX action tool

install 安装

npm install fetch-action --save

Usage 使用

Basic, 基础使用

import {createStore} from 'redux';
import createFetchAction from 'fetch-action';

const API = '';

// Define actions, 定义操作

const GET_USER_OK = 'GET_USER_OK';
const getUserOK = (rst)=>{
	return {type: 'GET_USER_OK', payload: rst}
};
const getUser = createFetchAction(`${API}/user`, {successAction: getUserOK});

// Define reducer, 定义 reducer
const reducer = (state={}, action)=>{
	switch(action.type){
		case GET_USER_OK:
			const user = action.payload;
			return {
				...state,
				user
			};
        default: return state;
	}
};

// Generate data, 生成数据
const user = createStore(reducer);

// Perform the operation, 执行操作
user.dispatch(getUser());

Use redux-act, 使用 redux-act 简化

import {createStore} from 'redux';
import { createAction, createReducer } from 'redux-act';
import createFetchAction from 'fetch-action';

const API = '';

// Define actions, 定义操作
const getUserOK = createAction('get user success| 获取用户成功');
const getUser = createFetchAction(`${API}/user`, {successAction: getUserOK});

// Define reducer, 定义 reducer
const reducer = createReducer({
	[getUserOK]:(state, user)=>({...state, user})
});

// Generate data, 生成数据
const user = createStore(reducer);

// Perform the operation, 执行操作
user.dispatch(getUser());

set POST/UPDATE/PATCH request 设置为POST/UPDATE/PATCH 请求

import createFetchAction from 'fetch-action';

const addUsers = createFetchAction(url, {successAction: addUsersOK, method: 'POST'});
const updateUsers = createFetchAction(url, {successAction: updateUsersOK, method: 'UPDATE'});
const updateUsersX = createFetchAction(url, {successAction: updateUsersXOK, method: 'PATCH'});

addUsers(data);
updateUsers(data);
updateUsersX(data);

Use restful api with pathname

import createFetchAction from 'fetch-action';

const API = '';
const getUser = createFetchAction(`${API}/user/{{userID}}`, {successAction: getUserOK, method: 'POST'});

getUser({}, {userID: 'id'});

Use interceptor, 使用拦截器过滤响应

import {interceptor} from 'fetch-action';

const myInterceptor = (response) =>{
	const json = response.json();
	return json.data;
};

interceptor(myInterceptor);

Use response result or error

API

| API name | API 名称 |description | 描述 | |------:|-------:|-------:|-------:| | createFetchAction| | create fetch AJAX action | 创建 AJAX 异步操作| | {interceptor}| | set response interceptor | 设置响应拦截器|

createFetchAction params config

| config name | 配置参数名称 | 描述 | 备注| |------:|-------:|-------:| -------:| | url| 路径 | AJAX 请求的路径| restful api 的url中参数配置参考 pathname |{successAction}| 请求成功操作 | |{failAction}| 请求成功操作 | |{method}| 请求方式 |