Redux's debugging tool does not work
This Baidu has been around and tried various methods, but it still doesn't work.
With an attempt, I lowered the redux-devtools-extentions by a bug version, which actually took effect. The redux debugging tool loaded the data normally;
Record the package version used in the react project.
as follows:
"dependencies": {
"@craco/craco": "^6.4.3",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"@xianzhengquan/postcss-px-2-vw": "0.0.1",
"antd-mobile": "^5.11.2",
"axios": "^0.27.2",
"formik": "^2.2.9",
"postcss": "^8.3.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-redux": "^8.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"react-thunk": "^1.0.0",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},Principles and usage of redux in react
As a popular framework, react project components are getting deeper and more pages are getting more and more, the data needs to be passed between the various component levels and pages, and many variables also need to be made globally manageable.
At this time, the use of redux and react-redux is very necessary. They can help us easily manage the global data of the project.
Next, I will write about my own experience in learning and using redux and React-redux, which is just a record and sharing of the learning process.
1. Several important concepts of redux and React-redux
1.1 action
Action is the payload that passes data from the application (the reason why it is not called a view here is because this data may be a server response, user input, or other non-view data) to the store.
It is the only source of store data.
Generally speaking, you will pass the action to the store via ().
1.2 reducer
Reducers specifies how changes in the state of the application respond to actions and send them to the store, remembering that actions simply describe the fact that something happened, and does not describe how the application updates the state.
1.3 store
The store is an object that associates action and reducer together. The store is essentially a state tree that saves the state of all objects.
Any UI component can access the state of a specific object directly from the store.
In Redux, all data (such as state) is stored in a store container, and there can only be one store object in an application.
When a store receives an action, it will proxy the action to the relevant reducer.
A reducer is a pure function that can view the previous state, execute an action and return a new state.
1.4 Provider
Provider is actually just an outer container, and its function is to pass data across levels through connection.
When using it, just define the Provider as the outermost component of the entire project and set up the store. Then the entire project can directly obtain this store.
Its principle is actually implemented through the 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: }
}
constructor() {
super()
= {}
}
render() {
return
}
}
= {
store:
}
1.5 connect
The function of connect is to connect the React component and the Redux store. It is wrapped 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 a property.
It has four parameters, mapStateToProps, mapDispatchToProps, mergeProps and options.
- The function of mapStateToProps is to bind the state (data source) in the store to the props of the specified component
- The function of mapDispatchToProps is to bind the action (the method of operating data) in the store to the props of the specified component
The other two methods are generally not used, so I will not introduce them here. .
So how does connect React components with 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()
= {}
}
componentWillMount() {
= (() => {
(mapStateToProps(()))
})
}
componentWillUnmount() {
()
}
render() {
return <WrappedComponent {...}
{...mapDispatchToProps()}/>
}
}
= {
store:
}
return Connect
})
export default connect
2. Use of redux and React-redux
The folder directory about redux in the project is as follows
Take the requirements for managing user information data as an example
- The first step is to write an action to operate user information
import {USER_INFO} from "../constants/actionTypes";
import store from '../store/store'
export const switchUser = (data) => {
("switchUser()",data);
return () => {
({
type: USER_INFO,
...data
})
}
}
- The second step is to write a reducer that changes user information and returns to 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 () {
case USER_INFO:
return {
...state,
...action
}
default:
return state
}
}
- Step 3: Complete the creation of the store
import {createStore} from 'redux'
import reducers from '../reducers/index'
let store = createStore(reducers)
export default store
- Step 4: Obtain user information
//Configuration code, connect the component and store through connect
let mapStateToProps = (state) => ({
userInfo: {...}
})
let mapDispatchToProps = (dispatch) => ({})
export default connect(mapStateToProps, mapDispatchToProps)(PageClass)
//Get user information through props
- Step 5: Modify user information
import {switchUser} from '../../redux/actions/userInfo'
switchUser({
userId: 10001,
userName: '',
userOpenid: '',
userPhone: '',
userRole: 2
})();
At this point, a simple usage process of redux+React-redux has been completed.
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.