redux-observable

Simple redux-observable example with React.

by superj80820

HTML

<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://unpkg.com/redux@^3.5.2/dist/redux.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.3.0/Rx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/cjs/index.min.js"></script>
<div id="root"></div>

Babel + JSX

const FETCH_PEOPLE = 'FETCH_PEOPLE'
const FETCH_PEOPLE_FULFIELLED = 'FETCH_PEOPLE_FULFIELLED'
const FETCH_PEOPLE_REJECTED = 'FETCH_PEOPLE_REJECTED'
const FETCH_PEOPLE_CANCELLED = 'FETCH_PEOPLE_CANCELLED'
console.log(window)
const { Observable, Subject } = Rx;
const { createStore, applyMiddleware } = Redux
const { connect, Provider } = ReactRedux
const { createEpicMiddleware } = ReduxObservable

const fetchPeople = () => ({
  type: FETCH_PEOPLE,
});

const fetchPeopleFulfielled = ({results}) => ({
  type: FETCH_PEOPLE_FULFIELLED,
  payload: {results},
})

const fetchPeopleRejected = (error) => ({
  type: FETCH_PEOPLE_REJECTED,
  payload: {error},
})

const fetchPeopleCancelled = () => ({
  type: FETCH_PEOPLE_CANCELLED,
});

const peopleEpic = action$ => action$.ofType(FETCH_PEOPLE)
  .mergeMap(action => Observable.ajax.get('https://swapi.co/api/people/')
		.map(({response}) => fetchPeopleFulfielled(response))
		.catch(error => Observable.of(fetchPeopleRejected(error.message)))
		.takeUntil(action$.ofType(FETCH_PEOPLE_CANCELLED))
	)

const peopleReducer = (state={ fetching: false, results: [] }, action) => {
  switch (action.type) {
    case FETCH_PEOPLE:
      return {
      	...state,
        fetching: true,
				error: null,
      }
    case FETCH_PEOPLE_FULFIELLED:
      return {
        ...state,
        fetching: false,
        results: action.payload.results,
      }
    case FETCH_PEOPLE_REJECTED:
      return {
        ...state,
        fetching: false,
				error: action.payload.error,
      }
    case FETCH_PEOPLE_CANCELLED:
      return {
        ...state,
        fetching: false,
      }
    default:
      return state;
  }
}

const epicMiddleware = createEpicMiddleware(peopleEpic)
const store = createStore(
  peopleReducer, 
  applyMiddleware(epicMiddleware)
)

let App = ({ fetching, results, fetchPeople, error }) => <div>
  <p>fetching: { fetching.toString() }</p>
  <p>error: {error ?
    <strong style={{color: 'red'}}>{error}</strong>:
    <strong...