How to use redux gracefully in react-native

First of all, my understanding of redux, the first impression is very important, like a sister paper.

In a word, he is a JS application state container.

Say that long is when your application is complex enough to interact with enough time, you are not convenient to manage your state, then to Redux Bar, he is a one-way data flow, efficient and clear.

So when to use Redux, there is a word that when you do not think of redux, then you really may not need it.

Here are some basic concepts.

Action: Chinese meaning, action, yes, in the Redux is also the meaning, refers to a user's action, placed in the native is the view of the user to accept an operation, such as Click, put in RN is a component accepted an interactive operation, resulting in a Action,action is actually a JS object (JS object is actually a key value pair), there is a required field type, to uniquely identify you will this action type, and some other appropriate data, the data should be as little as possible, the following look at the action of the look.

is not curious how to have a dispatch parameter, where this dispatch, he is in component has a bindactioncreactor function binding dispatch to the action, the above mock a user data, here with a Asynchronous operation, first defined a dologin function this is also a actioncreactor, first dispatchy a islogining operation, the success of the Issuccess action, the incoming user, failed to preach nothing. This is an asynchronous operation, the middle of the simulation of the operation of the fetch Baidu, want to use asynchronous functions, redux will use a called middleware, the following will speak

Store: The name is fastidious, yes, he is a warehouse, all the data state tree is in the store, and no matter how big your app has only one store, in the portal to Store,store has a few more important role, first Store.dispatch (action), all actions are initiated by him, because in the creation of the store will be passed to reducer, all once dispatch this action,reducer immediately will execute this action, now you just remember Reducer this thing. He's just a function.

Is the store first appeared, this is also a program JS part of the real entrance, some people will ask provider is what, he is a Facebook write things, with provider wrapped in your app, you can in your app to take the state, where the St Ore is obtained through this configuerstore (), where he really creates the place here:

If you have not seen redux affirmation of a face, CreateStore is what ghost applymiddleware,thunkmiddleware is what thing, I actually was a bit, in fact, the knowledge of this thing is never learn, you will be more than others, Others will be over you one day, so knowledge change the fate of this statement is not correct, the knowledge in the 60-70 years can change the fate of the word is also Li Ka-shing said that is true, but now access to knowledge is too much, as long as you want to learn you will never learn, but this is not what the egg, for your fate, Just you can work a little better, you can take continues dollars a month, you still can't marry a daughter-in-law, can't afford to buy a house. The real change of destiny is not knowledge, but wisdom, there are 1000 ways to succeed, it depends on whether you have a mind to think about, some people think but by all kinds of difficulties, this belongs to the wisdom .

CreateStore () This is a way to create a store, but the light is not created enough, we have to configure something for him, such as allowing him to initiate an asynchronous action, which uses the middleware Thunkmidlleware,applymiddleware is to create a store with middleware, the following people can understand, the introduction of a reducer, then Loginin is what ah, this is about reducer, Initalstate is an initial state, can be transmitted, if your server has returned to the original Words can also be passed in, the following is the famous reducer

Reducer: Simply saying that Reducer is a function that is passed in as a parameter when creating the store, so the store will automatically trigger the Reducer function whenever the dispatch method is called, so what does the Reducer function do? Reducer is responsible for accepting a previousstate, and an action, returning a new state,store to tell the update of the state that the component will trigger a re-rendering of the UI, so let's see what the reducer looks like.

Haha, is not the same as I described, accept an initial state, return a new state, forget a little, reducer can have a lot of, an application is too large, although the store only one, but reducer can be split, the following is used to combine a function of multiple Reducer

This is the combinereducers, remember to use the reducer when you must remember to use the following Userreducer oh, especially in the following select function

So what does this select function do, which is to bind the state of the store to the props of the current component, which corresponds to a state at each moment in the store, which corresponds to the corresponding ui,store.getstate () to get to the current state, Once the state changes and the UI rendering is triggered, the following connet () function indicates that LoginPage is interested in the state of the store, meaning that the page can change with the store when it changes.

To summarize: A single data source, only one store,store is the distribution center of Action, all state changes must be triggered by Store.dispatch (), with only one state tree;

can have multiple reducer, combined by combinereducers;

The only way to change state is to send an action to reducer;

Use the Bindactioncreactor () function to automatically bind the action to the dispatch () function

That's probably it, mutual encouragement.

How to use redux gracefully in react-native