OneArticle: developed using React-Native, using Redux, React-Redux, redux-persist, redux-Saga.

Why do I choose this name? I don’t want to, App is OneArticle, but the official App that discovers data source was called OneArticle before, let me call OneArticle is not good. The project address

A: Application introduction

  1. My project addressThe Android client demo– IOS, is there no problem in the simulator test? No developer account (smiley + awkward), but the simulator test is OK.
  2. Source of my data: OneArticle
  3. This is a view of the IOS version and Android version. There is no need to log in and register. There is no complex algorithm. Like you, we love simplicity, believe in the power of good writing, and are happy to stick to it.
  4. In this declaration I what version is not, just use their data to do a demonstration, not to publish and package this application, the consequences of the violation.

Mung, a pure native RN project written earlier

Two: interface demonstration

Three: Function introduction

  • Theme peels: Seamless peels are achieved, which is a Redux advantage, very simple.
  • Bookmarking localization and simple caching: Every bookmarking article is saved, and the last ten articles are cached.
  • Sharing function: realizing the sharing of wechat and circle of friends.
  • Seamlessly switch articles: Seamlessly switch articles without data conflicts.

You can download an official comparison of all functions, simple changes to the layout, mainly combat Redux.

Redux-thunk and Redux-saga

  1. Redux-thunk Redux-saga redux-Saga redux-Thunk Redux-Saga redux-Thunk Redux-Saga redux-Thunk Redux-Saga redux-Thunk Redux-Saga redux-thunk Redux-Saga Redux-saga is a middleware for managing asynchronous operations for Redux applications. Redux-saga can be used in place of redux-Thunk middleware by creating Sagas that collect all asynchronous operation logic in one place. In addition, takeLatest/takeEvery can only focus on the latest event, focus on each event, event frequency limit; Reudx-saga is easier to test, and so much more.

Five: required

  1. This project is suitable for those who are already familiar with the Basic controls of React- Native.
  2. Here are some of redux’s practical problems in the project. See for yourself.

6:redux-persist

Redux-persist is used to preserve data in a project, and it is very simple to use. There are few methods for redux-persist, but here are some of the problems encountered during development: Redux-persist stores the entire REdux, but there are some temporary data that need not be stored during development, such as the Modal display of this project and the storage of the request state. It is not possible to successfully enter the request state without the request state, which is obviously wrong. The latest version, V5+, also focuses on this aspect.

  1. One is that it is suitable for setting a blacklist. The data in the blacklist will not be kept. Of course, there is also a corresponding whitelist, which only keeps the data in the list, but there is a problem that each reducer replicates a single module during development, while the white blacklist can only be a level 1 object, so the state in a single Reducer cannot enter the list.
  2. The states to be ignored are written into a separate Reducer, so they can be written into the blacklist and ignored, but this is not suitable for maintenance. For example, some states belong to styles and some states belong to splash. If they are all written together, the specificity of reducer will be lacking.
  3. PersistCombineReducers and persistReducer Add a white blacklist on a single reducer and set the stateReconciler to a Reconciler, which allows control to a single state on a single Reducer.

Seven:redux-saga

If you have not learned redux-Saga, this Chinese document should be suitable for you. The Chinese document redux-Saga explains all the methods, usage and principles of Redux-Saga very well, which can guide you to skillfully use it. Redux-saga is mainly used here for data requests and cancellation requests. The following is part of the redux-Saga use of the project.

/* * only one article is displayed, and at most one * 1 can be used when requesting data. Explain that when a request for today's article takes 10s, a request for a specific day's article takes 4s. When a request for today's article takes 2s, a request for a specific day's article results in * 6s. 10 seconds later, the article is refreshed today. This result is obviously wrong. * It is normal to cancel the current request after 2s, so the article will make a new request, this is the following explanation. The first argument to takeLatest, fork is either a Generator or a normal function that returns a Promisefunction* watchRequestArticle() {
    let lastTask
    while (true) {
        const action = yield take(sagaRequestActions)
        if (lastTask) {
            yield cancel(lastTask)
        }
        yield put({type: REFRESH_ARTICLE_DOING})
        switch (action.type) {
            case SAGA_TODAY_ARTICLE:
                lastTask = yield fork(dealtData,action)
                break
            case SAGA_PREV_ARTICLE:
                lastTask = yield fork(dealtData,action)
                break
            case SAGA_NEXT_ARTICLE:
                lastTask = yield fork(dealtData,action)
                break
            case SAGA_RANDOM_ARTICLE:
                lastTask = yield fork(dealtData,action)
                break}}}Copy the code

The project is simple and clear, and there is not too much complex logic, you can directly look at the project source code

Eight:The project address

9:Share a previously written RN project

The React – Native

Seven points of design for pure React-native project Mung

A complete and compact Redux family bucket project

React-native drag sort

Multifunctional React-Native Toast components