Redux - Action Component Rendux 集合|-|{"files":{"component.jsx":{"env":"plain","abbr":"jjj"},"actions.js":{"env":"plain","abbr":""}},"tag":"Uncategorized"}

actions.js

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%c%() {
  return dispatch => {
    dispatch({ type: REQUEST_POSTS });
    fetch('/api/v1/posts')
      .then(res => res.json())
      .then(posts => dispatch({
        type: RECEIVE_POSTS,
        payload: posts%c%
      })).catch(err => dispatch({
        type: ERROR_POSTS,
        payload: err
      }))
  }
}

export function addFilter(callback) {
  return { type: ADD_FILTER, payload: callback };
}

component.jsx&env=plain&abbr=jjj&label=bbb

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>
    )
  }
}