Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor redux observable example (#3495)
* move imports into files using lettable operators, remove rxjs-library * refactor to be more in keeping with redux conventions from the single reducer.js, I split the functionality into actionTypes (actionTypes.js), actions (actions.js), and epics (epics.js). Most of the fetching should be done in an epic, but that requires introducing a new action and so was better in a separate commit. * switch to fetching on the front-end via an epic The fetching previously was triggered using an api call that had side effects, but was triggered from inside of an epic and was not an action. Now calls on the front-end all of the api calls are occuring via an action through fetchCharacterEpic. This does not remove the api.js file as I have not yet been able to get the epic to trigger correctly on the server-side, thus the api.fetchCharacter call is awaited in getInitialProps for initialising the state serverSide. * remove need for the serverSide api by directly handling the dispatch This still seems to be an incomplete solution to the problem as it circumvents the standard redux event flow on the serverside. However, it does obey the spirit of the redux event flow (as it passes an Observable of an action into the epic to then trigger other actions). Additionally, this removes the problem of code duplication. * update README.md and move lib/ to redux/ * Fix linting
- Loading branch information
1 parent
4d9cf19
commit 3bbfbfa
Showing
10 changed files
with
166 additions
and
103 deletions.
There are no files selected for viewing
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
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
export const FETCH_CHARACTER = 'FETCH_CHARACTER' | ||
export const FETCH_CHARACTER_SUCCESS = 'FETCH_CHARACTER_SUCCESS' | ||
export const FETCH_CHARACTER_FAILURE = 'FETCH_CHARACTER_FAILURE' | ||
export const START_FETCHING_CHARACTERS = 'START_FETCHING_CHARACTERS' | ||
export const STOP_FETCHING_CHARACTERS = 'STOP_FETCHING_CHARACTERS' |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import * as types from './actionTypes' | ||
|
||
export const startFetchingCharacters = () => ({ | ||
type: types.START_FETCHING_CHARACTERS | ||
}) | ||
export const stopFetchingCharacters = () => ({ | ||
type: types.STOP_FETCHING_CHARACTERS | ||
}) | ||
export const fetchCharacter = isServer => ({ | ||
type: types.FETCH_CHARACTER, | ||
payload: { isServer } | ||
}) | ||
export const fetchCharacterSuccess = (response, isServer) => ({ | ||
type: types.FETCH_CHARACTER_SUCCESS, | ||
payload: { response, isServer } | ||
}) | ||
|
||
export const fetchCharacterFailure = (error, isServer) => ({ | ||
type: types.FETCH_CHARACTER_FAILURE, | ||
payload: { error, isServer } | ||
}) |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import { interval } from 'rxjs/observable/interval' | ||
import { of } from 'rxjs/observable/of' | ||
import { takeUntil, mergeMap, catchError } from 'rxjs/operators' | ||
import { combineEpics, ofType } from 'redux-observable' | ||
import ajax from 'universal-rx-request' // because standard AjaxObservable only works in browser | ||
|
||
import * as actions from './actions' | ||
import * as types from './actionTypes' | ||
|
||
export const fetchUserEpic = (action$, store) => | ||
action$.pipe( | ||
ofType(types.START_FETCHING_CHARACTERS), | ||
mergeMap(action => { | ||
return interval(3000).pipe( | ||
mergeMap(x => | ||
of( | ||
actions.fetchCharacter({ | ||
isServer: store.getState().isServer | ||
}) | ||
) | ||
), | ||
takeUntil(action$.ofType(types.STOP_FETCHING_CHARACTERS)) | ||
) | ||
}) | ||
) | ||
|
||
export const fetchCharacterEpic = (action$, store) => | ||
action$.pipe( | ||
ofType(types.FETCH_CHARACTER), | ||
mergeMap(action => | ||
ajax({ | ||
url: `https://swapi.co/api/people/${store.getState().nextCharacterId}` | ||
}).pipe( | ||
mergeMap(response => | ||
of( | ||
actions.fetchCharacterSuccess( | ||
response.body, | ||
store.getState().isServer | ||
) | ||
) | ||
), | ||
catchError(error => | ||
of( | ||
actions.fetchCharacterFailure( | ||
error.response.body, | ||
store.getState().isServer | ||
) | ||
) | ||
) | ||
) | ||
) | ||
) | ||
|
||
export const rootEpic = combineEpics( | ||
fetchUserEpic, | ||
fetchCharacterEpic | ||
) |
11 changes: 4 additions & 7 deletions
11
examples/with-redux-observable/lib/index.js → ...ples/with-redux-observable/redux/index.js
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,14 @@ | ||
import { createStore, applyMiddleware } from 'redux' | ||
import thunkMiddleware from 'redux-thunk' | ||
import { createLogger } from 'redux-logger' | ||
import { combineEpics, createEpicMiddleware } from 'redux-observable' | ||
import starwarsReducer, { fetchUserEpic } from './reducer' | ||
|
||
const rootEpic = combineEpics( | ||
fetchUserEpic, | ||
) | ||
import { createEpicMiddleware } from 'redux-observable' | ||
import reducer from './reducer' | ||
import { rootEpic } from './epics' | ||
|
||
export default function initStore (initialState) { | ||
const epicMiddleware = createEpicMiddleware(rootEpic) | ||
const logger = createLogger({ collapsed: true }) // log every action to see what's happening behind the scenes. | ||
const reduxMiddleware = applyMiddleware(thunkMiddleware, epicMiddleware, logger) | ||
|
||
return createStore(starwarsReducer, initialState, reduxMiddleware) | ||
return createStore(reducer, initialState, reduxMiddleware) | ||
}; |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import * as types from './actionTypes' | ||
|
||
const INITIAL_STATE = { | ||
nextCharacterId: 1, | ||
character: {}, | ||
isFetchedOnServer: false, | ||
error: null | ||
} | ||
|
||
export default function reducer (state = INITIAL_STATE, { type, payload }) { | ||
switch (type) { | ||
case types.FETCH_CHARACTER_SUCCESS: | ||
return { | ||
...state, | ||
character: payload.response, | ||
isFetchedOnServer: payload.isServer, | ||
nextCharacterId: state.nextCharacterId + 1 | ||
} | ||
case types.FETCH_CHARACTER_FAILURE: | ||
return { ...state, error: payload.error, isFetchedOnServer: payload.isServer } | ||
default: | ||
return state | ||
} | ||
} |