A brief introduction and use of redux of React

1, Why redux?
React in the development of small projects, the data model (i.e. data) View (View layer), objects can be stored in the assembly state, in other words the dynamic data stored in a page in state.

But for the development of large, complex projects, the management of single-page status (state) there will be many, many. Manage changing state is very difficult to change state may cause changes in the page,

The page changes can also cause changes in the state, this change is very complex, so it is difficult to achieve stroke clear business function, for which we used the redux, redux use of managing a large number of state (state).

2, do not use redux under what circumstances?

UI layer is very simple (few dynamic data page)
Does not require a lot of interaction with the server, there is no use WebSocket
view (view level) is a single source of data.

3. Under what circumstances to use redux?

The status of a component needs to be shared
A state of need can get anywhere
A change global state component
A component to change the state of another component

4. What is the realization of the principle redux?

We know that the data from the view of state, or is one to one. redux just pulled out all the complex state stored in an object inside,

When the need to use the view data layer, the object can be introduced through the module.

5, prior to use redux we need to understand a few basic concepts redux module.

① Store can be seen as a core redux, because it is a place to store the data, as long as the data changes the view layer here means data has also changed,

All operations are carried out around the data store operating in. Generating a Store, createStore generating function provided by redux

The index.js // 
// warehouse store 
Import createstore {} from 'Redux' ; 
Import reducer from './reducer' ;
 // a function to store reducer binding, // Store is exposed to the generated reducer is (operation function data) 
Export default createstore (the reducer);

② Stat by the Store object generated getState () object can get data at this time, i.e., the data stored in the Store.

// This is a custom component modules ToDo.js, data acquired by the simulation module store in the 
Import React, {from} the Component 'REACT' 
Import {the Button, the Input, from List} 'antd' ;
 // introduced store 
store from Import '../store/index' ; 
Export default the Component class the extends the ToDo { 
    constructor (the props) { 
        Super (the props); 
        the this ; .STATE store.getState = () // data store to get in

③ Action change of State, will lead to a change of view, but the user is out of the reach of the state, can only be exposed to view. So change state must be a cause of view.

Action is an object, the user triggers an event (such as a click event) will carry the object to the reducer will be mentioned later

// a simple action objects 
the let action = { 
         type: 'TO_CNANGE_INPUT' , // represents the name of the Action is required 
         value: e.target.value 
 }

// The only way to change the state is to use Action

// will do the appropriate data processing according to type after a pass reducer

④store.dispatch () is the only way to view the issue Action

inputChange = (e)=>{
        let action = {
            type:'TO_CNANGE_INPUT',
            value:e.target.value
        }
        // 分发action 给 store
        store.dispatch(action);
    }

⑤ Reducer Store after receiving Action, it will return to a new state.

Action the reducer is a function that will process the corresponding data transmitted to the Action object type processing

// initState a data object is stored in the data store 
Export default (State = InitState, Action) => { 
    the console.log ( 'the reducer' );
     IF (action.type === 'TO_CNANGE_INPUT' ) { 
        the let obj = { 
            ... State, 
            for inputValue: action.value 
        }; 
        the console.log (obj); 
        return obj; 
    } 
}

⑥store.subscribe () method which listens for whether the Store State changes in

Export default class the ToDo the extends the Component { 
    constructor (The props) { 
        Super (The props); 
        the this .STATE store.getState = (); // get the data store 
        store.subscribe ( the this .changeState); // subscribers do things, changes in the data monitor store, update data in the current state 
    }

6.redux workflow

----- components react triggering event "and then send action Action Creators Reducer object to the processing ------" Reducer update data is completed, the new data is returned to the View in the state ---- "view after by updating the state re-render the page.

7. Examples: React with Redux do a memorandum, published on my GitHub, are interested can download and run on their own.

GitHub Address: https://github.com/ZhuJingLe/reduxAnli

If a message can not be bothered to find me the source code ^ _ ^

A brief introduction and use of redux of React

Guess you like