Awesome Open Source
Awesome Open Source

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} 请求方式
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,060,209
Reactjs (162,487
Actions (55,576
Rest (29,267
Redux (27,908
Patch (17,226
Rest Api (16,137
Fetch (8,850
Ajax (7,698