Created
December 28, 2015 18:14
-
-
Save coderkevin/a9358c6611082d810c16 to your computer and use it in GitHub Desktop.
Example of creating your own redux-effects middleware (and action usage, with notes about improvements)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// TODO: Find another way to do the extra actions. | |
// The extra actions on this return complicate things, mostly because | |
// it moves the chain of logic away from the state, and toward chaining | |
// actions instead. What if it's possible to get in the same state another | |
// way? Then we have to add that state to the other actions too. | |
// Also, this way, extra parameters have to added to this function | |
// just to pass them through to the resulting actions, which is coupling | |
// these things too tightly. | |
export function requestProfile( networkName, siteUrl, clientKey ) { | |
return bindRequest( | |
ACTION.HELLO_REQUEST_PROFILE( { networkName, siteUrl } ), | |
effectsHello.api( networkName, 'me' ), | |
[ | |
ACTION.HELLO_PROFILE_RETRIEVED, | |
( { request, result } ) => | |
storeAuthSite( { networkName, siteUrl, clientKey } ), | |
( { request, result } ) => | |
retrieveUser( request.payload.siteUrl, result.name, true ) | |
], | |
ACTION.HELLO_PROFILE_ERROR | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import realHello from 'exports?hello!hello.js/src/hello.js'; | |
const HELLO_INIT = 'EFFECT_HELLO_INIT'; | |
const HELLO_LOGIN = 'EFFECT_HELLO_LOGIN'; | |
const HELLO_LOGOUT = 'EFFECT_HELLO_LOGOUT'; | |
const HELLO_GETAUTHRESPONSE = 'EFFECT_HELLO_GETAUTHRESPONSE'; | |
const HELLO_API = 'EFFECT_HELLO_API'; | |
const types = [ | |
HELLO_INIT, | |
HELLO_LOGIN, | |
HELLO_LOGOUT, | |
HELLO_GETAUTHRESPONSE, | |
HELLO_API, | |
]; | |
function helloMiddleware() { | |
return next => action => { | |
if ( types.indexOf( action.type ) !== -1 ) { | |
return Promise.resolve( handle( action ) ); | |
} else { | |
return next( action ); | |
} | |
} | |
} | |
function handle( action ) { | |
switch( action.type ) { | |
case HELLO_INIT: | |
return realHello.init( action.payload.credentials, action.payload.options ); | |
case HELLO_LOGIN: | |
return realHello( action.payload.network ) | |
.login( action.payload.options ) | |
.then( createResponse, createErrorResponse ); | |
case HELLO_LOGOUT: | |
return realHello( action.payload.network ) | |
.logout( action.payload.options ) | |
.then( createResponse, createErrorResponse ); | |
case HELLO_GETAUTHRESPONSE: | |
return realHello( action.payload.network ).getAuthResponse() | |
case HELLO_API: | |
return realHello( action.payload.network ) | |
.api( action.payload.path, action.payload.method, action.payload.data ) | |
.then( createResponse, createErrorResponse ); | |
default: | |
console.error( 'Unexpected action type: ' + action.type ); | |
} | |
} | |
function createResponse( value ) { | |
return { value }; | |
} | |
function createErrorResponse( value ) { | |
return { value }; | |
} | |
function init( credentials, options ) { | |
return { | |
type: HELLO_INIT, | |
payload: { | |
credentials, | |
options | |
} | |
}; | |
} | |
function login( network, options ) { | |
return { | |
type: HELLO_LOGIN, | |
payload: { | |
network, | |
options | |
} | |
}; | |
} | |
function logout( network, options ) { | |
return { | |
type: HELLO_LOGOUT, | |
payload: { | |
network, | |
options | |
} | |
}; | |
} | |
function getAuthResponse( network ) { | |
return { | |
type: HELLO_GETAUTHRESPONSE, | |
payload: { | |
network | |
} | |
}; | |
} | |
function api( network, path, method, data ) { | |
return { | |
type: HELLO_API, | |
payload: { | |
network, | |
path, | |
method, | |
data | |
} | |
}; | |
} | |
export default helloMiddleware; | |
export const hello = { | |
init, | |
login, | |
logout, | |
getAuthResponse, | |
api, | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment