前言:
redux是一種狀態(tài)管理工具,可以存儲和操作一些全局或者很多組件需要使用的公共數(shù)據(jù)。
平心而論,redux的使用對于新上手來說不太友好,多個依賴包的,多種api的結(jié)合使用,相對來說比做同樣一件事的vuex用起來比較麻煩.不過,熟能生巧,用多了也就習(xí)慣了,下面是個人的一個demo,是自己根據(jù)尚硅谷張?zhí)煊韗eact教程學(xué)習(xí)的,然后寫的demo.
這個demo是一個實用版本的demo,而不是深入研究redux本身的各種api操作
思路和準備:
需要的依賴包:
redux : 狀態(tài)管理的核心插件(不僅僅是在react中能用,也可以在vue中用,但很顯然,vue不需要 !--)
react-redux : 專門讓redux和react之間對接的一個插件,讓redux寫起來沒有那么的麻煩,(相對沒有)
redux-devtools-extension : 調(diào)試工具,類似于vue-devtools,方便調(diào)試和查看,(當然了,本人是console.log黨,用得少,配置上就行了)
redux-thunk: 可以讓redux的值進行異步的修改,比較重要,能節(jié)省不少東西
思路:
首先,先要創(chuàng)建一個store,store是每個組件訪問的核心,就像淘寶網(wǎng)站一樣.
然后每個網(wǎng)站里面都有自己的商店,不同的商店對應(yīng)不同的商品和購買方式,所以你就需要針對具體的數(shù)據(jù)類型,配置具體操作他的方法.
然后每個組件就像消費者一樣,可以直接訪問淘寶網(wǎng)站和站內(nèi)所有的店鋪,并且可以選取你希望他方式購買他,并且你的消費對其他客戶也會造成影響,比如這件商品只剩一件了,你買了,其他用戶就沒貨了,這也就是全局數(shù)據(jù)狀態(tài)共享的意義.
ok了.學(xué)會了這些,那就直接展示代碼了,感覺條例還是比較清晰的.
文件結(jié)構(gòu)
|-- src(業(yè)務(wù)文件夾)? ? ? ??---------------互聯(lián)網(wǎng)世界
? ? |--pages(普通組件文件夾)? ? --------------電商領(lǐng)域? ? ?
? ? ? ? |--index.jsx(demo父組件)? ? --------------消費者集合
? ? ? ? |--demo1.jsx(子組件1)? ?--------------消費者1
? ? ? ? |--demo2.jsx(子組件2)? ?--------------消費者2
? ? |--redux(redux文件夾)
? ? ? ? |--actions(修改demo1數(shù)據(jù)狀態(tài)的操作函數(shù)集合)? ------------消費者購物方式集合
? ? ? ? ? ? |--demo1Actions.js(demo1數(shù)據(jù)操作方法)? ? ?-------------京東支付,選擇加急,使用京豆
? ? ? ? ? ? |--demo2Actions.js(demo2數(shù)據(jù)操作方法)? ? ?-------------微信支付,不著急,坐等快遞
? ? ? ? |--reducers(全局狀態(tài)初始化和操作分發(fā)的集合)??
? ? ? ? ? ? |--demo1.js(demo1的數(shù)據(jù))? -------------網(wǎng)店1
? ? ? ? ? ? |--demo2.js(demo2的數(shù)據(jù))? -------------網(wǎng)店2
? ? ? ? ? ? |--index.js(全局數(shù)據(jù)集合)? --------------網(wǎng)店集合
? ? ? ? |--store.js(全局數(shù)據(jù)的載體)? ?---------------電商網(wǎng)站
|--App.jsx(根組件)?
|--main.jsx(項目入口組件)???---------------互聯(lián)網(wǎng)
大概就是這么一個比喻,希望看客老爺們能理解我的這種比喻
某位大佬創(chuàng)建了一個電商網(wǎng)站,叫做四道(store).store里面可以創(chuàng)建很多網(wǎng)店,這些網(wǎng)店叫做瑞丟瑟斯(reducers).現(xiàn)在兩個消費者,戴某1和戴某2,有兩個店鋪叫做demo1和demo2.
戴某1看上了demo1店鋪的一件商品,情侶表,這個商品只有2件了,然后demo1就買了他,他將這個商品的接收地址分別發(fā)給了他自己和他對象那里,這個怎么買是他自己決定的,這個操作就是艾克神(action).因為戴某1買了這兩件件商品,demo1店鋪里面就沒有這兩件商品了.等到戴某2也想買這件商品的時候,發(fā)現(xiàn)這件商品已經(jīng)空了.所以,店鋪練得商品就是全局的數(shù)據(jù)or狀態(tài).
ok了,上具體代碼:文章來源：http://www.zghlxwxcb.cn/news/detail-740037.html
代碼
redux/store.js
// store構(gòu)建方法
import {legacy_createStore,applyMiddleware} from 'redux'
// 支持異步
import thunk from 'redux-thunk'
// 開發(fā)工具
import {composeWithDevTools} from 'redux-devtools-extension'
// 所有的reducers
import reducer from './reducers'
// 將這些方法和參數(shù)組合,形成一個全局的store,store也是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'
//將會在store上暴露的模塊
export default combineReducers({
demo1,
demo2
})redux/reducers/demo1.js
const initValue = 0
export default function demo1(value = initValue,action){
console.log(action,'點擊了')
const {type,data} = action
switch(type){
case 'add':
return value+data;
case 'delete':
return value-data;
default:
return value
}
}redux/reducers/demo2.js
//初始化的值
const initValue = {
name:'王驚濤',
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頁面</h4>
<p>原始操作值:{this.props.demo1}</p>
<Button onClick={this.addValue}>增加1</Button>
<Button onClick={this.deleteValue}>減少1</Button>
<br />
<p>demo2里面的內(nèi)容:---- 姓名:{this.props.demo2.name} 年齡:{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,'demo2中的props值')
this.setState({
data:this.props.demo2
},()=>{
console.log(this.props,'this.props---demo2???')
})
}
changeData = ()=>{
this.props.changeData({
name:'馬師',
age:28
})
}
addHandler = ()=>{
this.props.addAction(1)
}
render() {
return (
<div>
<h4>demo2頁面</h4>
<Button onClick={this.changeData}>修改值</Button>
<Button onClick={this.addHandler}>增加值</Button>
<p>姓名:{this.props.demo2.name}</p>
<p>年齡:{this.props.demo2.age}</p>
<br />
<p>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感覺有用的就給個贊吧,謝啦!文章來源地址http://www.zghlxwxcb.cn/news/detail-740037.html
到了這里，關(guān)于在react中使用redux && react-redux的使用demo的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
