Какая польза от следующих файлов в приложении React и Redux? - PullRequest
0 голосов
/ 24 сентября 2018

Какая польза от файлов ниже в решении REACT?Как поток работы здесь? введите описание изображения здесь

Этот файл находится в корневой папке.

1, Epic.js:

import { combineEpics } from 'redux-observable';
import { values } from 'lodash';

import * as postsEpics from './posts/epics';

export default combineEpics(
  ...values(postsEpics)
);

Следующие элементы находятся внутриПапка POST

1, Selector.js:

export function getParams(state) {
  return state.posts.params;
}

export function getPost(state, id) {
  return state.posts.byId[id];
}

2, reducer.js:

import Immutable from 'seamless-immutable';
import * as actionTypes from './actionTypes';

const initialState = Immutable({
  byId: {},
  params: {}
});

export default (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.FETCH_ONE_SUCCESS:      
  }
};

3, Index.js:

import * as postsActions from './actionCreators';
import * as postsSelectors from './selectors';

export {
  postsActions,
  postsSelectors,
};

4, epic.js: здесь происходит вызов API

export function fetchPost(action$) {
  return action$.ofType(actionTypes.FETCH_ONE)
    .map(action => action.payload)
    .switchMap(id => {
      return Observable.fromPromise(
        axios.get(`http://localhost:8081/posts/${id}`)
      ).map(res => postsActions.fetchPostSuccess(res.data));
    });
}

5, actionType.js: похоже на поддержание всех констант состояния API в одном файле.

export const FETCH_ONE = 'posts/FETCH_ONE';
export const FETCH_ONE_SUCCESS = 'posts/FETCH_ONE_SUCCESS';
export const FETCH_COLLECTION = 'posts/FETCH_COLLECTION';

6, actionCreator.js: какая польза от файла создателя действий

import { keyBy } from 'lodash';
import * as actionTypes from './actionTypes';

export function fetchPost(payload) {
  return {type: actionTypes.FETCH_ONE, payload};
}

export function fetchPostSuccess(payload) {
  const byId = {[payload.id]: payload};
  return {type: actionTypes.FETCH_ONE_SUCCESS, payload: {byId}};
}

1 Ответ

0 голосов
/ 24 сентября 2018

Для меня это выглядит как структура файла для типичного приложения Redux, где

actionTypes -> содержит константы для возможных действий

actionCreator -> содержит действия, которые отправляют действие с типом от одного изконстанты в actionTypes и полезной нагрузке, которые могут быть использованы редуктором.

reducer -> содержит редуктор, который имеет начальное состояние и логику для внесения изменений в хранилище избыточных данных на основе принимаемого действия.

Для получения более подробной информации вы читаете следующую статью, которая объясняет создание приложенияact-redux.https://medium.com/@rajaraodv/step-by-step-guide-to-building-react-redux-apps-using-mocks-48ca0f47f9a

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...