Actual usage analysis of react-redux plug-in project

This time I will bring you an analysis of the actual use of the react-redux plug-in project. What are the precautions for the actual use of the react-redux plug-in project? The following is a practical case, let's take a look.

You can check out my simple introduction to redux first

react-redux introduction

react-redux is to use redux to develop react A plug-in used at the time. In addition, redux is not a react product. redux can also be used in vue and angular. Here is a brief explanation of how to use react-redux to develop react.

Description

This plug-in can make our redux code more concise and beautiful. I assume that you already have a react environment that can display hello world created using create-react-app, and have installed redux.

Note: If it was just created using create-react-app, you need to run npm run eject to pop up the personalized settings, so that you can customize the configuration.

Installation

npm i react-redux --save

Use

react-redux provides two important interfaces: Provider, connect, using With this plug-in, you can forget about react-redux’s subscribe and dispatch, they will no longer be needed.

Code structure

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { reducer } from './index.redux';
import { Provider } from 'react-redux'
const store = createStore(reducer, applyMiddleware(thunk));
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

The outermost layer of the application in Provider, pass the store to it, and use it only this time.

//app.js
import React, { Component } from 'react';
import { addCreator, removeCreator, addAsync } from './index.redux';
import { connect } from 'react-redux';
class App extends Component {
 render() {
  return (
   <p className="App">
    <h1>现在有美女{this.props.num}个。</h1>
    <button onClick={this.props.addCreator}>add</button>
    <button onClick={this.props.removeCreator}>remove</button>
    <button onClick={this.props.addAsync}>addAsync</button>
   </p >
  );
 }
}
//定义把state中哪个属性放到props中
 function mapStateToProps(state) {
  return { num: state }
 }
 //定义把哪些方法放到props中
 const actionCreators={ addCreator, removeCreator, addAsync };
 //connect其实就是一个高阶组件，把app传进去，返回一个新的app组件
 App = connect(mapStateToProps, actionCreators)(App);
export default App;

connect is responsible for obtaining the parameters required by the component from the outside. After being defined through connect, the properties and methods placed in props can be obtained directly through this.props.

The following is the definition of reducer.

//react.redux.js
const Add = 'addGirl', Remove = "removeGirl";
export function reducer(state = 0, action) {
  switch (action.type) {
    case Add:
      return state + 1;
    case Remove:
      return state - 1;
    default:
      return 10;
  }
}
export function addCreator() {
  return { type: Add };
}
export function removeCreator() {
  return { type: Remove };
}
export function addAsync() {
  return (dispatch, getState) => {
    setTimeout(function () {
      dispatch(addCreator());
    }, 1000);
  }
}

Use decorators to write Conect more elegantly

First you need to install babel-plugin-transform-decorators-legacy and configure it in package.json.

Installation

npm i babel-plugin-transform-decorators-legacy --save-dev This is only for development use, so install it to --save-dev

Configuration

Configure the plugins attribute of babel

 "babel": {
  "presets": [
   "react-app"
  ],
  "plugins": [
   ["transform-decorators-legacy"]
  ]
 }

Modify the original writing method
Use @connect to redefine it and write it above the class.

//App.js
@connect((state) => ({ num: state }),{ addCreator, removeCreator, addAsync })
class App extends Component {
.....//省略
// function mapStateToProps(state) {
//  return { num: state }
// }
// App = connect(mapStateToProps, { addCreator, removeCreator, addAsync })(App);

Solution to the VS Code decorator prompt "experimentalDecorators"

Click the configuration button in the lower left corner of Visual Studio Code (or File>Preferences>Configuration, Windows environment), open the user settings window, enter "experimentalDecorators" in the search box, and find that you can find the option, as follows:

"javascript.implicitProjectConfig.experimentalDecorators": false

Just change it to true.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to operate Vue to make a proxy agent

Use jquery to get the specific content of the uploaded file

The above is the detailed content of Actual usage analysis of react-redux plug-in project. For more information, please follow other related articles on the PHP Chinese website!