react-redux: async promise
1、the simple sample
action: 事实上,只是返回个一个至少包含type的对象{ },用于reducer接收。
import {RECEIVE_DATA} from "constant/ActionType"; import MessageService from "service/demo-service/MessageService"; const _messageService = new MessageService(); function receiveData(data) { return { type: RECEIVE_DATA, list: data } } export function fetchData() { return (dispatch) => { _messageService.getMessage().then(res => { dispatch(receiveData(res.data)) }) } }
reducer:对应某个actionType有相应的数据返回
import {RECEIVE_DATA} from "constant/ActionType"; const initialState = { message: [] }; const MessageReducer = function (state = initialState, action) { switch (action.type) { case RECEIVE_DATA: return {message: action.list}; default: return state; } }; export default MessageReducer;
use:
const mapStateToProps = state => {
return {
messageList: state.MessageReducer.message
}
};
const mapDispatchToProps = {
fetchMessageList: fetchData
};
componentDidMount() {
this.props.fetchMessageList();
}
2、Async Action Helpers
// status constants export const REQUEST = 'request'; export const SUCCESS = 'success'; export const FAILURE = 'failure'; export const createAsyncAction = (type, promiseCreator) => { return () => (dispatch, getState) => { dispatch({ type, readyState: REQUEST }); const promise = promiseCreator(); return promise.then( data => { dispatch({ type, readyState: SUCCESS, data }); }, error => { dispatch({ type, readyState: FAILURE, error }); } ); }; };
use:
function latestPostsRequest() { return fetch(`https://www.reddit.com/latest.json`) .then( response => response.json(), error => console.log('An error occured.', error) ) } const FETCH_LATEST_POSTS = 'Actions/Posts/FetchLatest'; export const fetchLatestPosts = createAsyncAction(FETCH_LATEST_POSTS, latestPostsRequest);
result:
import { fetchLatestPosts } from '../actions/posts'; // in some component... dispatch(fetchLatestPosts); // immediately: // { type: 'Actions/Posts/FetchLatest', readyState: 'request' } // after success: // { // type: 'Actions/Posts/FetchLatest', // readyState: 'success', // data: (some blob of json data from the api) // }
3、More sophisticated actions: Args and Thunks
export const createAsyncAction = (type, promiseCreator) => { // get hash of args to pass through to promise creator return (args = {}) => (dispatch, getState) => { dispatch({ args, type, readyState: REQUEST }); // pass args through let promise = promiseCreator(args); // handle thunk-style promises if (typeof promise === 'function') { promise = promise(dispatch, getState); } return promise.then( data => { dispatch({ args, type, readyState: SUCCESS, data }); }, error => { dispatch({ args, type, readyState: FAILURE, error }); } ); }; };
use:
import { createAsyncAction } from 'helpers/async'; import fetch from 'isomorphic-fetch' // (pretend for a moment that such an action exists) import { navigate, SIGN_IN } from 'actions/navigation'; // takes args: { subreddit } function postsWithLikesRequest({ subreddit }) { // returns a 'thunk promise' that uses dispatch and getState return function(dispatch, getState) { const userId = getState().userId; if(!userId) { // we have the dispatch function in our async action! dispatch(navigate(SIGN_IN)) } else { return fetch(`https://www.reddit.com/r/${subreddit}.json?likes=true&userId=${userId}`) .then( response => response.json(), error => console.log('An error occured.', error) ) } } } const FETCH_POSTS_WITH_LIKES = 'Actions/Posts/FetchWithLikes'; export const fetchPostsWithLikes = createAsyncAction(FETCH_POSTS_WITH_LIKES, postsWithLikesRequest)
async reducer:
// helpers/async.js import { combineReducers } from 'redux'; export const createAsyncReducer = (type) => { const loading = (state = false, action) => { if (action.type === type) { return action.readyState === REQUEST; } return state; }; const data = (state = null, action) => { if (action.type === type) { return action.data; } return state; }; const error = (state = null, action) => { if (action.type === type) { return action.error; } return state; }; return combineReducers({ loading, data, error }); };
use async reducer:
import { createAsyncReducer } from 'helpers/async'; import { FETCH_LATEST_POSTS } from 'actions/posts'; // // Here's the reducer we can create with the helper // export const latestPosts = createAsyncReducer(FETCH_LATEST_POSTS); // // It's functionally equivalent to writing all this: // export function latestPosts(state = { loading: false, data: null, error: null }, action) { if(action.type === FETCH_LATEST_POSTS) { switch(action.readyState) { case 'request': return { loading: true, data: null, error: null }; case 'success': return { loading: false, data: action.data, error: null }; case 'failure': return { loading: false, data: null, error: action.error }; } } return state; }
5、More configuration
The naive reducer returned by the simple createAsyncReducer
function above is pretty useful for simple data fetches, but we often want to do more than just store the data from a request.
The actual createAsyncReducer
function we use supports swapping in reducers that can respond to different actions or handle the request actions differently.
import {combineReducers} from "redux"; import {FAILURE, REQUEST, SUCCESS} from "constant/ActionType"; export const asyncReducerHelper = (type, reducers = {}) => { let defaultReducers = { loading: (state = false, action) => { if (action.type === type) { return action.readyState === REQUEST; } return state; }, data: (state = null, action) => { if (action.type === type && action.readyState === SUCCESS) { return action.data; } return state; }, error: (state = null, action) => { if (action.type === type && action.readyState === FAILURE) { return action.err; } return state; }, }; return combineReducers(Object.assign({}, defaultReducers, reducers)); };
use:
import { createAsyncAction, createAsyncReducer } from 'helpers/async'; // I'm using the fetch api here, but you can substitute any http request libarary. // For more about the fetch api: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API const postsRequest = (subreddit) => { return fetch(`https://www.reddit.com/r/${subreddit}.json`) .then( response => response.json(), error => console.log('An error occured.', error) ) } const FETCH_POSTS = 'Actions/Posts/Fetch'; // async action export const fetchPosts = createAsyncAction(FETCH_POSTS, postsRequest); // async reducer with shape { loading, data, error } export const posts = createAsyncReducer(FETCH_POSTS);