Some experience in building the React Native project framework

React Native is a cross-platform mobile application development framework that was open-sourced by Facebook in April 2015. In just one or two years, many companies have supported and adopted this framework to build their company's mobile applications.
React Native enables you to get a completely consistent development experience based on Javascript and React to build world-class native apps.

Project framework and project structure

1. Technology stack used in the project

react native, react hook, typescript, immer, tslint, jest, etc.

They are all quite common, so I won’t introduce them in detail.

2. Data processing uses useContext+useReducer in react hook

The idea is consistent with redux, it is relatively simple to use and suitable for less complex business scenarios.

const HomeContext = createContext<IContext>({
  state: defaultState,
  dispatch: () => {}
});
const ContextProvider = ({ urlQuery, pageCode }: IProps) => {
  const initState = getInitState(urlQuery, pageCode);
  const [state, dispatch]: [IHomeState, IDispatch] = useReducer(homeReducer, initState);

  return (
    <HomeContext.Provider value={{ state, dispatch }}>
      <HomeContainer />
    </HomeContext.Provider>
  );
};

const HomeContainer = () => {
const { dispatch, state } = useContext(HomeContext);
...

3. The project structure is as follows

|-page1
    |-handler // Pure function for processing logic, needs to be covered by UT|-container // Integrate data, behavior and components|-component // Pure UI component, displays content and user interaction, does not process business logic|-store // The data structure cannot exceed 3 layers, and the level can be reduced by external references and redundant fields|-reducer // Use immer to return new data (immutable data)
    |-...
|-page2
|-...

Specifications in the project

1. Page

The entire project is a multi-page application, and the most basic split unit is page.

Each page has a corresponding store, not the entire project uses one store. The reasons for this are as follows:

• The logic of each page is relatively independent
• Each page can be used as a project entry
• Combine RN page life cycle to process data (avoid data initialization, caching and other problems)
  

External operations in each page are defined in the Page component

• Page jump logic
• Events to be processed after rollback
• Which storage data needs to be operated?
• What services need to be requested, etc.
  

The main function of the Page component

Based on its own business module, all external dependencies and external interactions that can be abstracted are concentrated in the code of this component.

It is convenient for developers to accurately locate specific codes according to specific pages + data sources when writing logic and troubleshooting between pages.

2. Reducer

In previous projects, reducers may involve some data processing, user behavior, log points, page jumps, and other code logic.

Because in the process of writing code, developers find that reducer is the end point of a certain processing logic (after updating the state, the event is over), which is very suitable for doing these things.

With the maintenance of the project and the iteration of requirements, the size of the reducer continues to increase.

Because of the lack of organization and the huge amount of code, it would be difficult to adjust the code.

It is conceivable how painful it would be for you to maintain such a project.

To do this, some subtraction was done on the code in the reducer:

• Only modify the state data in the reducer
• Use immer's produce to generate immutable data
• Modify redundant individual fields, integrate them, and enumerate the actions corresponding to the page behaviors
  

The main function of reducer

In an enumerable form, summarize all the scenarios of operating data in the page.

In addition to its own features that are suitable for the react framework, it is endowed with certain business logic reading attributes, so that all data processing logic on the page can be roughly read without relying on UI components.

// Avoid dispatching twice and defining too many single-field update cases
// After integrating this logic, it is associated with the behavior on the page, which is conducive to understanding and reading case EFHListAction.updateSpecifyQueryMessage:
    return produce(state, (draft: IFHListState) => {
        draft.specifyQueryMessage = payload as string;
        draft.showSpecifyQueryMessage = true;
    });    
case EFHListAction.updateShowSpecifyQueryMessage:
    return produce(state, (draft: IFHListState) => {
        draft.showSpecifyQueryMessage = payload as boolean;
    });

3. handler

Here we first introduce the concept of a pure function:

A function is called a pure function if its return value depends only on its parameters and it has no side effects during execution.

Abstract as much logic as possible into pure functions and put them into handlers:

• Covers more business logic
• Only pure functions
• UT coverage is required
  

The main function of handler

Responsible for logical processing in scenarios such as data source to store, container to component, dispatch to reducer, etc.

As a storage place for logical processing functions in various scenarios, the entire file does not involve the association relationship on the page process. Each function can be reused as long as it meets the usage scenarios of its input and output, and is mostly used in container files.

export function getFilterAndSortResult(
  flightList: IFlightInfo[],
  filterList: IFilterItem[],
  filterShare: boolean,
  filterOnlyDirect: boolean,
  sortType: EFlightSortType
) {
  if (!isValidArray(flightList)) {
    return [];
  }

  const sortFn = getSortFn(sortType);
  const result = flightList.filter(v => doFilter(v, filterList, filterShare, 1, filterOnlyDirect)).sort(sortFn);

  return result;
}

describe(getFilterAndSortResult.name, () => {
  test('getFilterAndSortResult', () => {
    expect(getFilterAndSortResult(flightList, filterList, false, EFlightSortType.PriceAsc)).toEqual(filterSortResult);
  });
});

4. Container

As can be seen from the project structure diagram above, each Page has a base Container as the center of data processing.

Under this base Container, each sub-Container will be defined according to different modules:

• Lifecycle processing (some asynchronous operations to be performed during initialization)
• Provides data sources for rendering components
• Define the behavior function in the page

The main function of Container

In the entire project, the convergence points of various data, UI, and user behaviors should be separated from the relevant modules as much as possible to avoid excessive code volume and difficulty in maintenance.

The definition of Container should be abstracted by the modules displayed on the page. For example, Head Container, Content Container, Footer Container and other common division methods.

Some relatively independent modules in some pages should also produce their corresponding containers to aggregate related logic, such as coupon giving module, user feedback module, etc.

Pay special attention to the behavior function

• Behaviors that are common to multiple containers can be placed directly in the base container
• The action example (setAction) in the above architecture diagram is another behavior reuse, which is applied according to specific scenarios.
  

Convenient for code reading, the floating display logic of module A, the order in which modules are generated when module B is used, module A first and then module B need to use the method of A

• Define data points and user behavior points
• Calling the page jump method (Page-->base Container-->sub-Container)
• Other side effects of behavior

const OWFlightListContainer = () => {
    // Get data through Context const { state, dispatch } = useContext(OWFlightListContext);
    ...

    // Countdown for timeout during initial loading useOnce(overTimeCountDown);
    ...
    
    // User clicks sort const onPressSort = (lastSortType: EFlightSortType, isTimeSort: boolean) => {
        // References the getNextSortType function in the handler const sortType = getNextSortType(lastSortType, isTimeSort);
        dispatch({ type: EOWFlightListAction.updateSortType, payload: sortType });
        
        // Point-buried operation logSort(state, sortType);
    };
    
    // Rendering display component return <.../>;
}

summary

From easy to code to easy to read
Throughout the project, many specifications are defined in order to facilitate maintenance by project personnel in addition to the realization of functions.

• The Page component contains page-related external dependencies
• Reducer enumerates all events that operate on page data
• The handler integrates the processing of business logic, and ensures the quality of the project with pure function implementation and UT coverage.
• The behavior function in the Container defines all events related to user operations and records the embedded data
• Avoid business logic processing in Componet, only perform UI display, reduce UI automation cases, and increase UT cases
  

It is relatively easy to define the specification. To maintain a project well, it depends more on the team members to persevere on the premise of reaching a consensus.

Share some practical functions

Get value based on object path

/**
 * Get the value based on the object path* @param target {a: { b: { c: [1] } } }
 * @param path 'abc0'
 */
export function getVal(target: any, path: string, defaultValue: any = undefined) {
  let ret = target;
  let key: string | undefined = '';
  const pathList = path.split('.');

  do {
    key = pathList.shift();
    if (ret && key !== undefined && typeof ret === 'object' && key in ret) {
      ret = ret[key];
    } else {
      ret = undefined;
    }
  } while (pathList.length && ret !== undefined);

  return ret === undefined || ret === null ? defaultValue : ret;
}

//DEMO
const errorCode = getVal(result, 'rstlist.0.type', 0);

Read according to the configuration information

// When connecting with the outside, some fixed structures and scalable data lists are often defined. // In order to adapt to such contracts and facilitate better reading and maintenance, the following functions are summarized. export const GLOBAL_NOTE_CONFIG = {
  2: 'refund',
  3: 'sortType',
  4: 'featureSwitch'
};

/**
 * According to the configuration, get the value in attrList and return the data of json object type * @private
 * @memberof DetailService
 */
export function getNoteValue<T>(
  noteList: Array<T> | undefined | null,
  config: { [_: string]: string },
  keyName: string = 'type'
) {
  const ret: { [_: string]: T | Array<T> } = {};

  if (!isValidArray(noteList!)) {
    return ret;
  }

  //@ts-ignore
  noteList.forEach((note: any) => {
    const typeStr: string = (('' + note[keyName]) as unknown) as string;

    if (!(typeStr in config)) {
      return;
    }

    if (note === undefined || note === null) {
      return;
    }

    const key = config[typeStr];

    // When there are multiple values, change to array type if (ret[key] === undefined) {
      ret[key] = note;
    } else if (Array.isArray(ret[key])) {
      (ret[key] as T[]).push(note);
    } else {
      const first = ret[key];
      ret[key] = [first, note];
    }
  });

  return ret;
}

//DEMO
// Applicable to the value logic of some externally defined extensible note node lists const { sortType, featureSwitch } = getNoteValue(list, GLOBAL_NOTE_CONFIG, 'ntype');

Multiple condition array sorting

/**
 * Get the sort function used for sorting * @param fn comparison function for elements of the same type, true means sorting priority */
export function getSort<T>(fn: (a: T, b: T) => boolean): (a: T, b: T) => 1 | -1 | 0 {
  return (a: T, b: T): 1 | -1 | 0 => {
    let ret = 0;

    if (fn.call(null, a, b)) {
      ret = -1;
    } else if (fn.call(null, b, a)) {
      ret = 1;
    }

    return ret as 0;
  };
}

/**
 * Multiple sorting */
export function getMultipleSort<T>(arr: Array<(a: T, b: T) => 1 | -1 | 0>) {
  return (a: T, b: T) => {
    let tmp;
    let i = 0;

    do {
      tmp = arr[i++](a, b);
    } while (tmp === 0 && i < arr.length);

    return tmp;
  };
}

//DEMO
const ageSort = getSort(function(a, b) {
  return a.age < b.age;
});

const nameSort = getSort(function(a, b) {
  return a.name < b.name;
});

const sexSort = getSort(function(a, b) {
  return a.sex && !b.sex;
});

//The order of judgment conditions can be adjusted const arr = [nameSort, ageSort, sexSort];

const ret = data.sort(getMultipleSort(arr));

The above are some details of my experience in building the React Native project framework. For more information about building the React Native project framework, please pay attention to other related articles on 123WORDPRESS.COM!