How to use react-redux plugin

This time I will show you how to use the react-redux plug-in and what are the precautions for using the react-redux plug-in. The following is a practical case, let’s take a look.

Introduction to react-redux

react-redux is a plug-in used when developing react using redux. In addition, redux is not react.

redux can also be used in products, vue and angular; the following 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

attributes 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 the option can be found, 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 use Vue to implement a countdown button

How to use Vue to write a two-way data binding

The above is the detailed content of How to use react-redux plugin. For more information, please follow other related articles on the PHP Chinese website!