Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what is the core principle of React-Redux". In daily operation, I believe many people have doubts about the core principle of React-Redux. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "what is the core principle of React-Redux?" Next, please follow the editor to study!

I. several important concepts of redux and React-redux

1.1 action

An Action is a payload that transfers data from an application (not called view here because it may be server responses, user input, or other non-view data) to store. It is the only source of store data. Normally you will send action to store via store.dispatch ().

1.2 reducer

Reducers specifies how a change in the state of the application responds to actions and sends it to store, keeping in mind that actions only describes the fact that something happened, not how the application updates state.

1.3 store

Store is the object that connects action and reducer. Store is essentially a state tree that stores the state of all objects. Any UI component can access the state of a specific object directly from store.

In Redux, all data (such as state) is stored in a store container, and there can be only one store object in an application. When a store receives an action, it will give the action agent to the relevant reducer. Reducer is a pure function that looks at the previous state, executes an action, and returns a new state.

1.4 Provider

Provider is really just an outer container, and its purpose is to transfer data across levels by cooperating with connect. When using, you only need to define Provider as the outermost component of the entire project, and set up the store. Then the store can be obtained directly for the whole project. Its principle is actually realized through [Context] () in React. Its rough core code is as follows:

Import React, {Component} from 'react' import {PropTypes} from' prop-types' export default class Provider extends Component {getChildContext () {return {store: this.props.store}} constructor () {super () this.state = {}} render () {return this.props.children}} Provider.childContextTypes = {store: PropTypes.object}

1.5 connect

The function of connect is to connect the React component with Redux store, which is packaged in the outer layer of our container component. It receives the state and dispatch in the store provided by Provider above, passes it to a constructor, returns an object, and passes it to our container component in the form of attributes.

It has four parameters: mapStateToProps, mapDispatchToProps, mergeProps and options.

The function of mapStateToProps is to bind the state (data source) in store to the props of the specified component. The function of mapDispatchToProps is to bind the action (methods of manipulating data) in store to the props of the specified component. The other two methods are generally not used, so we will not introduce them here.

So how does connect connect React components to Redux store? The main logic can be summarized into the following code:

Import {Component} from "react"; import React from "react" Import {PropTypes} from 'prop-types' const connect = (mapStateToProps MapDispatchToProps) = > (WrappedComponent = > {class Connect extends Component {constructor () {super () this.state = {}} componentWillMount () {this.unSubscribe = this.context.store.subscribe (() = > {this.setState (mapStateToProps (this.context.store.getState ()})) } componentWillUnmount () {this.unSubscribe ()} render () {return}} Connect.contextTypes = {store: PropTypes.object} return Connect}) export default connect

II. The use of redux and React-redux

The folder directory for redux in the project is as follows

Take, for example, the need to manage user information data.

The first step is to write an action that manipulates user information

Import {USER_INFO} from ".. / constants/actionTypes"; import store from'.. / store/store' export const switchUser = (data) = > {console.log ("switchUser ()", data); return () = > {store.dispatch ({type: USER_INFO,... data})}}

The second step is to write a reducer that changes the user's information and returns the new state

Import {USER_INFO} from ".. / constants/actionTypes" Const redUserInfo = (state = {userId: 10001, userName:', userOpenid:', userPhone:', userRole: 0}, action) = > {if (action = undefined) {return state} switch (action.type) {case USER_INFO: return {... state ... action} default: return state}}

Third, complete the creation of store

Import {createStore} from 'redux' import reducers from'.. / reducers/index' let store = createStore (reducers) export default store

The fourth step is to obtain user information

/ / configure code to connect components to store via connect let mapStateToProps = (state) = > ({userInfo: {... state.redUserInfo}}) let mapDispatchToProps = (dispatch) = > ({}) export default connect (mapStateToProps, mapDispatchToProps) (PageClass) / / obtain user information this.props.userInfo through props

Step 5: modify the user information

Import {switchUser} from'.. /.. / redux/actions/userInfo' switchUser ({userId: 10001, userName:', userOpenid:', userPhone:', userRole: 2}) (); at this point, the study of "what is the core principle of React-Redux" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.