Zero-starting Android new Project 10-react Native & Redux

In this article to say React Native and Redux, and the other one came up on a bunch of translation of things different, this article will start from a simple example, so that we can quickly understand what React Native, Redux and Common MVC, MVP, etc. what is the difference, How to organize a React Native project for a Redux architecture.

In order to avoid giving up without getting started, it is expected that the next article will start from the practice of our project and talk about more complex application scenarios.

What is react Native

React Native enables you to build applications on native platforms based on JavaScript and React, advocating "learn once, Write Anywhere", and reusing code to improve development efficiency.

The project, driven by Facebook Open source, has been updated very actively over the past year. Document suggested direct crossing net of React Native, Chinese station a bit pit.

Support System: Android 4.1 (API 16) and >= IOS 7.0.

For React, you can refer to the React.js Novice Village tutorial, which was previously translated for the Nuggets translation program, in a nutshell React the application into a dynamically reusable component--view rendering (JSX), how the data is bound to the display, state changes (states), Properties (Props) are included inside the component.

The entire application is built from one component to the other (component development), and each component is changed by state-driven.

React Native just like its name, bring React to the native world, and H5 different is that we no longer use CSS and HTML, and only JS as companion. We no longer have those div , input these tags, but by View , and TextInput so on, more in line with the habits of native developers. Layout, fortunately there is strong Flexbox support, if developers have previously used or seen Google on the Android version of GitHub FlexboxLayout , I believe it will be very familiar. The page stacks in native development are also Navigator implemented ( BackAndroid supported by the return key on Android).

Unlike WebView, the React Native run interface will eventually be interpreted as native View, can be directly used layout boundaries or Hierarchy Viewer to see the level (JS file is packaged as a bundle, located under assets, The RN engine will load and interpret the mapping).

Benefits
-Experience the convenience of web development, no longer need to compile, re-load JS on the line
-Can be debugged directly using Chrome or nuclide
-Android/ios can share a large portion of code on both ends (RN is also supported on platforms such as Windows, MacOS, Node-webkit, etc.)
-Hot update, JS bundle issued a new on the line (of course, there are certain limitations, if it is hybrid, then native RN module part can not be updated)

Harm
-Front-end development does not natively do React Native (unless you can really use only those things that come with it), and understanding the components that RN offers can also be very giddy (need to know both Android and IOS).
-Native development requires a certain cost of learning practice to master React Native. After all, ES6 is not as stupid as the past JS.
-React Native is still in the stage of rapid iterative development, and you never know how much of the original code you need to modify for the next version of your upgrade.
-React Native is less informative, especially in the domestic, especially hybrid developed (open source projects on GitHub are mostly purely RN).

What is Redux

Redux itself is not particularly closely linked to React, but rather an excellent implementation of the Flux architecture proposed by Facebook, which can be used with any other framework. Used on React, it needs to be paired with React-redux (so that redux can grow more redux-* middleware than React).

Redux on the basis of React (state and props), the concept of store, action, Reducer is added, and the global one is normalized so that it can be used to back up the entire application status based on it. The component passes the action through dispatch to store,reducer the new state is returned according to the original state and action, and the component renders the interface according to the new state.

Redux is a predictable state container that requires only a state tree to restore the "scene of the incident".

See the project from the example

In order to avoid saying a lot of concepts, we confused, indefinitely, here take an example of React Native and Redux combined effect, try to avoid the appearance of the code, and to take pictures and text instead.

counter! Yes, it is the Counter, not Todo,todo has been black is not a kind of.

Project source code is located in: Https://github.com/alinz/example-react-native-redux. Contains Counter and Counters two sub-items. The former is a single counter, the latter on the basis of the former increases the number of counters can be added to the function, relatively more complex, but the introduction of some good practice can be consulted.

Run effect

First look at the final effect, convenient to correspond to the following explanation.
The first Counter project is simple, which is a text box plus two buttons, one plus 1, and one minus 1.
The second Counters project, which is based on the former (using the Counter component), can add any number of counters and adds a delay plus 1 function to simulate time-consuming operations such as:

Counter

First look at counter, we look at the physical architecture and motion flow two angles.

directory, the following files are available:

Index.android.js and Index.ios.js are the RN portals for both Android and iOS, and the content is usually the same.
Android for Android catalog, below are our familiar Build.gralde.
iOS is a project catalog for iOS and contains Xcode projects.
The app is the RN directory that contains the JS source code shared by Android and IOS projects.
Node_modules is the dependency that node uses to parse Package.json downloads.

Physical Structure

Counterapp.js is the actual entrance to the entire application.

Action Flow

And without talking about the specific bind and createstore operations, let's take a look at the distribution of the entire action when the interaction occurs, with the Click plus sign as an example:

The Onpress event triggers a subsequent series of activities, while the action function of the Counter Component is passed in by the external props (here, the render function of Counterapp, as shown below).

Then look at the creation of the store, at the app.js entrance:

Instead of calling action directly, Component is called through the store, and the store binds all the actions through bindactioncreators when it is initialized. The bindings are as follows:

Counters

Then we look at the more complex Counters project, the top-level directory structure is similar, no longer repeat.

After reading the above demo action diagram, I believe that the following explanations will be easier to understand.

Physical Structure

Let's take a detailed look at the file organization in the app directory under modules.

Actions.js and just like, defined a action, slightly different is due to the asynchronous operation, so involved in the dispatch function, about dispatch can view official documents.

Constants.js defines the type of all action and the name of the App.

Reducers.js returns a new state based on the action (payload and type) and the original, and also the definition of the initial status of initial (we can put it in a separate file).

App.js defines the layout (rendering and action) of the page, and exports the container generated by connect. Let's take a quick look at how the render section is done.

How about, JSX is very easy to understand?

Action Flow

Counter's own action flow above we have already cited, the project in the increase or decrease count similar, the only difference is that the action is not only type, but also with the payload (ID) to mark the different counters.

So here we take an example of adding a click event to the counter.

Does it look the same as above? The rest of the incrementwithdelay is actually the same, but the return is a function, in the SetTimeOut callback in the dispatch (Thunk middleware will help us to deal with).

Summarize

Above, we have a general understanding of how the Redux architecture app works on React Native through physical structure and activity diagrams. Specific details, it is recommended that you go to the source code on GitHub, through the above explanation, it should not be difficult to understand.

Technology stack

We are currently practicing the react nataive technology stack:
-Immutable.js
-React
-Redux
-React-redux
-Redux-thunk
-Redux-logger
-Redux-mock-store
-React-native-router-flux
-React-native-simple-store
-Regenerator
-Undefined
-Jest

Read more

• React

  • REACT:ES5 (Createclass) or ES6 (class)?

• Redux

  • Redux.js
  • Get Started with Redux
  • Deep into the source code: Interpreting the design ideas and usage of redux
  • Redux-thunk (Redux's thunk middleware)

• React Native

  • Facebook React Native Docs
  • Mapping UIComponent (IOS, Android, React Native)

• Javascript

  • Middleware middleware
  • ES6

• Project

  • Https://github.com/fbsamples/f8app
  • http://f8-app.liaohuqiu.net/
  • Https://github.com/bartonhammond/snowflake
  • Https://github.com/jondot/awesome-react-native
  • Https://rnplay.org/apps/picks

• Tools

  • https://nuclide.io/
  • Https://github.com/infinitered/ignite

• Gossip

  • How to view Ali Wireless front-end release of Weex?
  • weex&reactnative contrast, Big head ghost of the comparison between the two, the following also Ali P8 comments, comments are wonderful, remember a page to see the past oh, haha.

You are welcome to sweep the public number above and subscribe to our public number!

Zero-starting Android new Project 10-react Native & Redux