Упрощение шаблона¶

{ type: 'ADD_TODO', text: 'Use Redux' }
{ type: 'REMOVE_TODO', id: 42 }
{ type: 'LOAD_ARTICLE', response: { ... } }

const ADD_TODO = 'ADD_TODO';
const REMOVE_TODO = 'REMOVE_TODO';
const LOAD_ARTICLE = 'LOAD_ARTICLE';

// somewhere in an event handler
dispatch({
  type: 'ADD_TODO',
  text: 'Use Redux',
});

export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text,
  };
}

import { addTodo } from './actionCreators';

// somewhere in an event handler
dispatch(addTodo('Use Redux'));

function addTodoWithoutCheck(text) {
  return {
    type: 'ADD_TODO',
    text,
  };
}

export function addTodo(text) {
  // This form is allowed by Redux Thunk middleware
  // described below in “Async Action Creators” section.
  return function (dispatch, getState) {
    if (getState().todos.length === 3) {
      // Exit early
      return;
    }

    dispatch(addTodoWithoutCheck(text));
  };
}

export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text,
  };
}

export function editTodo(id, text) {
  return {
    type: 'EDIT_TODO',
    id,
    text,
  };
}

export function removeTodo(id) {
  return {
    type: 'REMOVE_TODO',
    id,
  };
}

function makeActionCreator(type, ...argNames) {
  return function (...args) {
    let action = { type };
    argNames.forEach((arg, index) => {
      action[argNames[index]] = args[index];
    });
    return action;
  };
}

const ADD_TODO = 'ADD_TODO';
const EDIT_TODO = 'EDIT_TODO';
const REMOVE_TODO = 'REMOVE_TODO';

export const addTodo = makeActionCreator(ADD_TODO, 'todo');
export const editTodo = makeActionCreator(
  EDIT_TODO,
  'id',
  'todo'
);
export const removeTodo = makeActionCreator(
  REMOVE_TODO,
  'id'
);

export function loadPostsSuccess(userId, response) {
  return {
    type: 'LOAD_POSTS_SUCCESS',
    userId,
    response,
  };
}

export function loadPostsFailure(userId, error) {
  return {
    type: 'LOAD_POSTS_FAILURE',
    userId,
    error,
  };
}

export function loadPostsRequest(userId) {
  return {
    type: 'LOAD_POSTS_REQUEST',
    userId,
  };
}

import { Component } from 'react';
import { connect } from 'react-redux';
import {
  loadPostsRequest,
  loadPostsSuccess,
  loadPostsFailure,
} from './actionCreators';

class Posts extends Component {
  loadData(userId) {
    // Injected into props by React Redux `connect()` call:
    let { dispatch, posts } = this.props;

    if (posts[userId]) {
      // There is cached data! Don't do anything.
      return;
    }

    // Reducer can react to this action by setting
    // `isFetching` and thus letting us show a spinner.
    dispatch(loadPostsRequest(userId));

    // Reducer can react to these actions by filling the `users`.
    fetch(`http://myapi.com/users/${userId}/posts`).then(
      (response) =>
        dispatch(loadPostsSuccess(userId, response)),
      (error) => dispatch(loadPostsFailure(userId, error))
    );
  }

  componentDidMount() {
    this.loadData(this.props.userId);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.userId !== this.props.userId) {
      this.loadData(nextProps.userId);
    }
  }

  render() {
    if (this.props.isFetching) {
      return <p>Loading...</p>;
    }

    let posts = this.props.posts.map((post) => (
      <Post post={post} key={post.id} />
    ));

    return <div>{posts}</div>;
  }
}

export default connect((state) => ({
  posts: state.posts,
}))(Posts);

export function loadPosts(userId) {
  // Interpreted by the thunk middleware:
  return function (dispatch, getState) {
    let { posts } = getState();
    if (posts[userId]) {
      // There is cached data! Don't do anything.
      return;
    }

    dispatch({
      type: 'LOAD_POSTS_REQUEST',
      userId,
    });

    // Dispatch vanilla actions asynchronously
    fetch(`http://myapi.com/users/${userId}/posts`).then(
      (response) =>
        dispatch({
          type: 'LOAD_POSTS_SUCCESS',
          userId,
          response,
        }),
      (error) =>
        dispatch({
          type: 'LOAD_POSTS_FAILURE',
          userId,
          error,
        })
    );
  };
}

import { Component } from 'react';
import { connect } from 'react-redux';
import { loadPosts } from './actionCreators';

class Posts extends Component {
  componentDidMount() {
    this.props.dispatch(loadPosts(this.props.userId));
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.userId !== this.props.userId) {
      this.props.dispatch(loadPosts(nextProps.userId));
    }
  }

  render() {
    if (this.props.isFetching) {
      return <p>Loading...</p>;
    }

    let posts = this.props.posts.map((post) => (
      <Post post={post} key={post.id} />
    ));

    return <div>{posts}</div>;
  }
}

export default connect((state) => ({
  posts: state.posts,
}))(Posts);

export function loadPosts(userId) {
  return {
    // Types of actions to emit before and after
    types: [
      'LOAD_POSTS_REQUEST',
      'LOAD_POSTS_SUCCESS',
      'LOAD_POSTS_FAILURE',
    ],
    // Check the cache (optional):
    shouldCallAPI: (state) => !state.posts[userId],
    // Perform the fetching:
    callAPI: () =>
      fetch(`http://myapi.com/users/${userId}/posts`),
    // Arguments to inject in begin/end actions
    payload: { userId },
  };
}

function callAPIMiddleware({ dispatch, getState }) {
  return (next) => (action) => {
    const {
      types,
      callAPI,
      shouldCallAPI = () => true,
      payload = {},
    } = action;

    if (!types) {
      // Normal action: pass it on
      return next(action);
    }

    if (
      !Array.isArray(types) ||
      types.length !== 3 ||
      !types.every((type) => typeof type === 'string')
    ) {
      throw new Error(
        'Expected an array of three string types.'
      );
    }

    if (typeof callAPI !== 'function') {
      throw new Error('Expected callAPI to be a function.');
    }

    if (!shouldCallAPI(getState())) {
      return;
    }

    const [requestType, successType, failureType] = types;

    dispatch(
      Object.assign({}, payload, {
        type: requestType,
      })
    );

    return callAPI().then(
      (response) =>
        dispatch(
          Object.assign({}, payload, {
            response,
            type: successType,
          })
        ),
      (error) =>
        dispatch(
          Object.assign({}, payload, {
            error,
            type: failureType,
          })
        )
    );
  };
}

export function loadPosts(userId) {
  return {
    types: [
      'LOAD_POSTS_REQUEST',
      'LOAD_POSTS_SUCCESS',
      'LOAD_POSTS_FAILURE',
    ],
    shouldCallAPI: (state) => !state.posts[userId],
    callAPI: () =>
      fetch(`http://myapi.com/users/${userId}/posts`),
    payload: { userId },
  };
}

export function loadComments(postId) {
  return {
    types: [
      'LOAD_COMMENTS_REQUEST',
      'LOAD_COMMENTS_SUCCESS',
      'LOAD_COMMENTS_FAILURE',
    ],
    shouldCallAPI: (state) => !state.comments[postId],
    callAPI: () =>
      fetch(`http://myapi.com/posts/${postId}/comments`),
    payload: { postId },
  };
}

export function addComment(postId, message) {
  return {
    types: [
      'ADD_COMMENT_REQUEST',
      'ADD_COMMENT_SUCCESS',
      'ADD_COMMENT_FAILURE',
    ],
    callAPI: () =>
      fetch(`http://myapi.com/posts/${postId}/comments`, {
        method: 'post',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ message }),
      }),
    payload: { postId, message },
  };
}

let _todos = [];

const TodoStore = Object.assign(
  {},
  EventEmitter.prototype,
  {
    getAll() {
      return _todos;
    },
  }
);

AppDispatcher.register(function (action) {
  switch (action.type) {
    case ActionTypes.ADD_TODO:
      let text = action.text.trim();
      _todos.push(text);
      TodoStore.emitChange();
  }
});

export default TodoStore;

export function todos(state = [], action) {
  switch (action.type) {
    case ActionTypes.ADD_TODO:
      let text = action.text.trim();
      return [...state, text];
    default:
      return state;
  }
}

export const todos = createReducer([], {
  [ActionTypes.ADD_TODO](state, action) {
    let text = action.text.trim();
    return [...state, text];
  },
});

function createReducer(initialState, handlers) {
  return function reducer(state = initialState, action) {
    if (handlers.hasOwnProperty(action.type)) {
      return handlers[action.type](state, action);
    } else {
      return state;
    }
  };
}