Question

REACT解决方案中以下文件的用途是什么？工作流程在这里吗？ enter image description here

这是在根文件夹中。

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

Answer 1

对于我来说，这看起来像典型的redux应用程序的文件结构

actionTypes->包含可能动作的常量

actionCreator->包含一些操作，这些操作将从actionTypes中的一个常量和有效负载中分派的类型中分派一个操作，而该操作可以被减速器使用。

reducer->包含减速器，该减速器具有初始状态和逻辑，可以根据接收到的操作来更改redux存储。

有关更多详细信息，请阅读以下文章，该文章解释了react-redux应用程序的创建。 https://medium.com/@rajaraodv/step-by-step-guide-to-building-react-redux-apps-using-mocks-48ca0f47f9a

React和Redux应用程序中以下文件的用途是什么？

1 个答案: