Last active
October 26, 2016 07:12
-
-
Save AlexFrazer/2b3d7b76161892fe586fbc68e9b7f3b2 to your computer and use it in GitHub Desktop.
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 fetch from 'isomorphic-fetch'; | |
| export const REQUEST_POSTS = 'posts/REQUEST'; | |
| export const RECEIVE_POSTS = 'posts/RECEIVE'; | |
| export const ERROR_POSTS = 'posts/ERROR'; | |
| export const ADD_FILTER = 'posts/ADD_FILTER'; | |
| export const REMOVE_FILTER = 'posts/REMOVE_FILTER'; | |
| // this action is a generic get all posts | |
| export function getAll() { | |
| return dispatch => { | |
| dispatch({ type: REQUEST_POSTS }); | |
| fetch('/api/v1/posts') | |
| .then(res => res.json()) | |
| .then(posts => dispatch({ | |
| type: RECEIVE_POSTS, | |
| payload: posts | |
| })).catch(err => dispatch({ | |
| type: ERROR_POSTS, | |
| payload: err | |
| })) | |
| } | |
| } | |
| export function addFilter(callback) { | |
| return { type: ADD_FILTER, payload: callback }; | |
| } |
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 React, { Component, PropTypes } from 'react'; | |
| import Loading from 'components/Loading'; | |
| export default class List extends Component { | |
| static propTypes = { | |
| data: PropTypes.array.isRequired, | |
| fetch: PropTypes.func.isRequired, | |
| isFetching: PropTypes.bool.isRequired, | |
| }; | |
| componentDidMount() { | |
| this.props.fetch(); | |
| } | |
| render() { | |
| const { isFetching, data } = this.props; | |
| return ( | |
| <ul> | |
| {isFetching && <Loading message="Retrieving posts..." />} | |
| {data.map(entry => <li key={entry.id}>{entry.title}</li>)} | |
| </ul> | |
| ) | |
| } | |
| } |
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 { connect } from 'react-redux'; | |
| import { bindActionCreators } from 'redux'; | |
| import List from 'components/List'; | |
| import * as PostActions from ''; | |
| export default connect(state => ({ | |
| ...state.posts | |
| }), dispatch => ({ | |
| fetch: bindActionCreators(PostActions.getAll, dispatch) // bind this part of the api | |
| }))(List); |
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 noop from 'lodash/noop'; | |
| import { | |
| REQUEST_POSTS, | |
| RECEIVE_POSTS, | |
| ERROR_POSTS, | |
| ADD_FILTER, | |
| REMOVE_FILTER | |
| } from 'actions/posts'; | |
| export default function posts(state={ | |
| data: [], | |
| isFetching: false, | |
| lastUpdated: new Date(), | |
| filter: noop | |
| }, action) { | |
| switch (action.type) { | |
| case REQUEST_POSTS: | |
| return Object.assign({}, state, { | |
| isFetching: true | |
| }) | |
| case RECEIVE_POSTS: | |
| return Object.assign({}, state, { | |
| isFetching: false, | |
| lastUpdated: new Date(), | |
| data: action.payload | |
| }); | |
| case ADD_FILTER: | |
| return Object.assign({}, state, { | |
| data: state.data.filter(action.payload), | |
| filter: action.payload | |
| }); | |
| default: | |
| return state; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment