Foreword:
Redux is a state management tool that can store and operate some global or common data that many components need to use.
To be fair, the use of redux is not very friendly to newcomers. The combined use of multiple dependency packages and multiple APIs is relatively more troublesome than vuex, which does the same thing. However, practice makes perfect, and you use it more. I’m used to it, so here is a personal demo. I learned it based on Zhang Tianyu’s react tutorial in Shang Silicon Valley, and then wrote the demo.
This demo is a practical version of the demo, rather than an in-depth study of the various API operations of redux itself.
Thinking and preparation:
Required dependency packages:
redux: The core plug-in for state management (can be used not only in react, but also in vue, but obviously, vue does not need it!–)
react-redux : A plug-in specifically designed to connect redux and react, making it less troublesome to write redux (relatively not)
redux-devtools-extension: Debugging tool, similar to vue-devtools, convenient for debugging and viewing (of course, I am a console.log person, use it less, just configure it)
redux-thunk: It allows the redux value to be modified asynchronously, which is more important and can save a lot of things.
Ideas:
First, you need to create a store. The store is the core of each component’s access, just like the Taobao website.
Then each website has its own store, and different stores correspond to different products and purchase methods, so you need to configure specific methods of operating it for specific data types.
Then each component is like a consumer. You can directly access the Taobao website and all the stores on the site, and you can choose the way you want to buy it. Your consumption will also have an impact on other customers. For example, there is only one item left for this product. Once the item is available, if you buy it, other users will be out of stock. This is the meaning of global data status sharing.
OK. Now that I have learned this, I can show the code directly. I feel that the regulations are relatively clear.
File structure
|– src (business folder) —————Internet World
|–pages (common component folder) ————–E-commerce field
|–index.jsx (demo parent component) ————–Consumer collection
|–demo1.jsx (subcomponent 1) ————–Consumer 1
|–demo2.jsx (subcomponent 2) ————–Consumer 2
|–redux(redux folder)
|–actions (a collection of operation functions that modify the data status of demo1) ————A collection of consumer shopping methods
|–demo1Actions.js (demo1 data operation method) ————-JD payment, choose expedited, use Jingdou
|–demo2Actions.js (demo2 data operation method) ————-WeChat payment, don’t worry, just wait for the express delivery
|–reducers (a collection of global state initialization and operation distribution)
|–demo1.js(demo1 data)————-Online store 1
|–demo2.js(demo2 data)————-Online store 2
|–index.js (global data collection) ————–Online store collection
|–store.js (carrier of global data) ————— E-commerce website
|–App.jsx (root component)
|–main.jsx (project entry component) —————Internet
This is probably such a metaphor. I hope you readers can understand my metaphor.
A certain boss created an e-commerce website called Sidao (store). Many online stores can be created in the store, and these online stores are called Reducers >.Now two consumers, Dai 1 and Dai 2, have two stores called demo1 and demo2.
Dai 1 fell in love with a product in the demo1 store, a couple watch. There were only 2 pieces of this product, and then demo1 bought it for him. He sent the receiving address of the product to himself and his partner respectively. How can this happen? It is his own decision to buy, and this operation is Aike Shen (action). Because Dai 1 bought these two items, there are no two items in the demo1 store. Wait until Dai 1 When 2 also wanted to buy this product, he found that this product was already empty. Therefore, the product acquired by the store is the global data or status.
OK, here’s the specific code:
Code
redux/store.js
// store construction method
import {legacy_createStore,applyMiddleware} from 'redux'
//Support asynchronous
import thunk from 'redux-thunk'
// development tools
import {composeWithDevTools} from 'redux-devtools-extension'
// all reducers
import reducer from './reducers'
// Combine these methods and parameters to form a global store, which is also the core of redux
export default legacy_createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))
main.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import 'reset-css'
import './index.css'
import store from './redux/store.js'
import {Provider} from 'react-redux'
ReactDOM.createRoot(document.getElementById('root')).render(
// <React.StrictMode>
<Provider store={store}>
<App />
</Provider>
// </React.StrictMode>,
)
redux/reducers/index.js
import {combineReducers} from 'redux'
import demo1 from './demo1'
import demo2 from './demo2'
//Modules that will be exposed on the store
export default combineReducers({
demo1,
demo2
})
redux/reducers/demo1.js
const initValue = 0
export default function demo1(value = initValue,action){
console.log(action,'Clicked')
const {type,data} = action
switch(type){
case 'add':
return value + data;
case 'delete':
return value-data;
default:
return value
}
}
redux/reducers/demo2.js
//Initialized value
const initValue = {
name:'Wang Jingtao',
age:27
}
export default function demo2(value=initValue,action){
const {type,data} = action
switch(type){
case 'change':
return data
default:
return value
}
}
redux/actions/demo1Actions.js
export const addAction = data => ({type:'add',data})
export const deleteAction = data => ({type:'delete',data})
export const asyncAddAction = (data,time) => {
return (dispatch)=>{
setTimeout(()=>{
dispatch(addAction(data))
}, time)
}
}
redux/actions/demo2Actions.js
export const changeData = data => ({type:'change',data})
src/pages/index.jsx
import React, { Component } from 'react'
import withRouter from '../../utils/withRouter'
import Demo1 from './demo1'
import Demo2 from './demo2'
export default withRouter(class index extends Component {
render() {
return (
<div>
<Demo1></Demo1>
<hr />
<Demo2></Demo2>
</div>
)
}
})
src/pages/demo1.jsx
import React, { Component } from 'react'
import withRouter from '../../utils/withRouter'
import {connect} from 'react-redux'
import {addAction,deleteAction} from '../../redux/actions/demo1Actions'
import {Button} from 'antd'
const Demo1 = withRouter(class index extends Component {
addValue = ()=>{
this.props.addAction(1)
}
deleteValue = ()=>{
this.props.deleteAction(1)
}
render() {
console.log(this.props,'this.props---')
return (
<div>
<h4>demo1 page</h4>
<p>Original operation value: {this.props.demo1}</p>
<Button onClick={this.addValue}>Add 1</Button>
<Button onClick={this.deleteValue}>Decrease by 1</Button>
<br />
<p>Contents in demo2:---- Name: {this.props.demo2.name} Age: {this.props.demo2.age}</p>
</div>
)
}
})
export default connect(
state =>({
demo1:state.demo1,
demo2:state.demo2
}),
{addAction,deleteAction}
)(Demo1)
src/pages/demo2.jsx
import React, { Component } from 'react'
import withRouter from '../../utils/withRouter'
import { connect } from 'react-redux'
import {changeData} from '../../redux/actions/demo2Actions'
import {addAction} from '../../redux/actions/demo1Actions'
import {Input,Button} from 'antd'
const Demo2 = withRouter( class index extends Component {
state = {
data:null
}
InputStype = {
width:'400px'
}
componentDidMount(){
console.log(this.props,'props value in demo2')
this.setState({
data:this.props.demo2
},()=>{
console.log(this.props,'this.props---demo2?')
})
}
changeData = ()=>{
this.props.changeData({
name:'horse master',
age:28
})
}
addHandler = ()=>{
this.props.addAction(1)
}
render() {
return (
<div>
<h4>demo2 page</h4>
<Button onClick={this.changeData}>Modify value</Button>
<Button onClick={this.addHandler}>Add value</Button>
<p>Name:{this.props.demo2.name}</p>
<p>Age:{this.props.demo2.age}</p>
<br />
<p>Value in demo1: {this.props.demo1}</p>
</div>
)
}
})
export default connect(
state=>({
demo1:state.demo1,
demo2:state.demo2
}),
{changeData,addAction}
)(Demo2)
withRouter.jsx
import {
useLocation,
useNavigate,
useParams,
} from "react-router-dom";
function withRouter(Component) {
function ComponentWithRouterProp(props) {
let location = useLocation();
let navigate = useNavigate();
let params = useParams();
return (
<Component
{...props}
router={<!-- -->{ location, navigate, params }}
/>
);
}
return ComponentWithRouterProp;
}
export default withRouter
Please give it a thumbs up if you find it useful, thank you!