ReactRedux for Front End Notes

Posted by johnbest on Fri, 02 Aug 2019 04:00:42 +0200

1. Redux Global Perception

Redux is a JavaScript state management container that provides a state management container for predictable states.From Flux, Facebook launched the Redux Library in 2015.

Chinese website: http://www.redux.org.cn/

Official git: https://github.com/reduxjs/redux

First, you'll reference the redux.js package, which provides a Redux object that can call the Redux.createStore() method.

<body>
    <h1 id="info"></h1>
    <button id="btn1">plus</button>
    <button id="btn2">reduce</button>
    <button id="btn3">ride</button>
    <button id="btn4">except</button>

    <script type="text/javascript" src="redux.min.js"></script>
    <script type="text/javascript">
        //This is a reducer，In the form of (state, action) => state Pure function of.
        //Pure function: function inside, does not change the parameters passed in, only return New value.
        //Description action How to put state Transform to Next state. 
        const reducer = (state = {"v" : 10} , action)=>{
            if(action.type == "ADD"){
                return {"v" : state.v + 1};
            }else if(action.type == "MINUS"){
                return {"v" : state.v - 1};
            }else if(action.type == "CHENG2"){
                return {"v" : state.v * 2}
            }
             return state;
        }
        //Establish Redux store To store the state of the application.
        //store Translated to Warehouse, this is something that stores and manipulates data
        const store = Redux.createStore(reducer);

        //Create a view function, and store Show on view.
        const render = ()=>{
            //The getState() method of the store can get the data in the warehouse
            document.getElementById("info").innerHTML = store.getState().v;
        }
        render(); //call render function
        //To add store Register with the view, so when store When the data in the is changed, it can be called automatically render function
        store.subscribe(render);

        // All in Application state All stored in a single object tree store Medium.
        // The only change state The way is to trigger action，An object describing what happened.
        // For description action How to change state Tree, you need to write reducers. 
        document.getElementById("btn1").onclick = function(){
            // The only way to change the internal state is to dispatch an action, and type indicates the action to be done
            store.dispatch({"type":"ADD"})
        }
        document.getElementById("btn2").onclick = function(){
            store.dispatch({"type":"MINUS"})
        }
        document.getElementById("btn3").onclick = function(){
            store.dispatch({"type":"CHENG"})
        }
    </script>
</body>

Create a function called reducer in which a quantity called state is maintained and the initial value is {"v": 0}.

There are two things you must know about this function:

1) It is a pure function that does not change the {"v": 0} inside the function, does not change the state object, but returns a new state.

const reducer = (state = {"v" : 0} , action)=>{
    if(action.type == "ADD"){
        return {"v" : state.v + 1};
    }else if(action.type == "MINUS"){
        return {"v" : state.v - 1};
    }
    return state;
}

2) This function provides predictable functionality.

The state in reducer is like being locked in a safe.Any change to this state can only be made by dispatch with an action.In other words, only dispatch has an action to change the data in this safe.

In the reducer function, an if statement is used to indicate a list of possible changes to the state. Only changes listed in the floor will occur:

if(action.type==""){
    return New state
}else if(action.type ==""){
    return New state
}else if(action.type ==""){
    return New state
}

Sample Code

Create a store warehouse that requires a reducer when it is created, so you can think of a store as a reducer and a reducer as a store.

const store = Redux.createStore(reducer);

Reducr is a pure function, while store provides three methods:

store.subscribe() registered with view

store.getState() gets data

store.dispatch() Send action

Learn to combine redux with react so you don't have to register to the view.

Then create a monitor:

document.getElementById("btn1").onclick = function(){
     store.dispatch({"type":"ADD"})
}
document.getElementById("btn2").onclick = function(){
     store.dispatch({"type":"MINUS"})
}
document.getElementById("btn3").onclick = function(){
     store.dispatch({"type":"CHENG"})
}

Sample Code

Click the button and store wants to dispatch an action.An action is a JSON that must have a type attribute with a value of uppercase letters.This action has no meaning, such as {"type":"ADD"}, but reducer knows it and can make a difference!

2. Redux and React for Integrated Development

Using the Redux Predictable State Container during React development, there are two new dependencies to load:

redux: provides functions such as createStore, combineReducers, bindActionCreators

react-redux: Only two things are provided, <Provider>component, connect() function.

Create the <Provider>component in main.js, which provides a top-level container for context delivery of stores so that stores can "inject" into all components

react-redux provides the Provider component to get the container component to the state

Provider wraps one layer outside the root component so that all App subcomponents get the state by default.

The principle is the context property of the React component, which places the store object in the context

To get the global store value in a component, you need to use the connect function, which provides the role of connecting the React component to the Redux store.

The first parameter of connect(): The first parameter of the function mapStateToProps is Redux's store, which automatically binds the store's data to the component as props.

The second parameter of connect(): mapDispatchToProps Its function is to bind action s to components as props

It is generally understood that using connect binds state and dispatch to React components, enabling them to access redux data.

Once connect()(App); connect a component, and the component updates the view as if its props had changed when the global store sends changes.

Wrap a layer around the original application component to make the entire application a subcomponent of the Provider

Receives store s of Redux as props and passes them through context objects to connect on descendant components

It really connects Redux to React, which is packaged on the outside of our container components. It receives the States and dispatch es from the store s provided by Provider, passes them to a constructor, returns an object, and passes them to our container components as attributes.

connect()(App), the first () takes two parameters, mapStateToProps and mapDispatchToProps.

Both parameters are functions, the key name of the object returned by the first parameter function is automatically bound to props, and the key name of the object returned by the second parameter function is also bound to props.

If you're interested, take a look at the API documentation for the connect function:

No matter how big the application is, there is only one store, which "shines" on all components just like the deity. By default, all components cannot get data from the store. connect which component gets data, and the largest App component does wrap all components, but it does not mean that the App component is connected to the next generationThe other components of the table are also joined.

Programmer Think

ReactRedux for Front End Notes

1. Redux Global Perception

2. Redux and React for Integrated Development

3. Redux Programming-TodoList

4. logger Plugins

5. combineReducers and bindActionCreators

5.1 combineReducers

5.2 bindActionCreators

Hot Topics