前言:

redux是一種狀態(tài)管理工具,可以存儲(chǔ)和操作一些全局或者很多組件需要使用的公共數(shù)據(jù)。

平心而論,redux的使用對(duì)于新上手來說不太友好,多個(gè)依賴包的,多種api的結(jié)合使用,相對(duì)來說比做同樣一件事的vuex用起來比較麻煩.不過,熟能生巧,用多了也就習(xí)慣了,下面是個(gè)人的一個(gè)demo,是自己根據(jù)尚硅谷張?zhí)煊韗eact教程學(xué)習(xí)的,然后寫的demo.

這個(gè)demo是一個(gè)實(shí)用版本的demo,而不是深入研究redux本身的各種api操作

思路和準(zhǔn)備:

需要的依賴包:

redux : 狀態(tài)管理的核心插件(不僅僅是在react中能用,也可以在vue中用,但很顯然,vue不需要 !--)

react-redux : 專門讓redux和react之間對(duì)接的一個(gè)插件,讓redux寫起來沒有那么的麻煩,(相對(duì)沒有)

redux-devtools-extension : 調(diào)試工具,類似于vue-devtools,方便調(diào)試和查看,(當(dāng)然了,本人是console.log黨,用得少,配置上就行了)

redux-thunk: 可以讓redux的值進(jìn)行異步的修改,比較重要,能節(jié)省不少東西

思路:

首先,先要?jiǎng)?chuàng)建一個(gè)store,store是每個(gè)組件訪問的核心,就像淘寶網(wǎng)站一樣.

然后每個(gè)網(wǎng)站里面都有自己的商店,不同的商店對(duì)應(yīng)不同的商品和購買方式,所以你就需要針對(duì)具體的數(shù)據(jù)類型,配置具體操作他的方法.

然后每個(gè)組件就像消費(fèi)者一樣,可以直接訪問淘寶網(wǎng)站和站內(nèi)所有的店鋪,并且可以選取你希望他方式購買他,并且你的消費(fèi)對(duì)其他客戶也會(huì)造成影響,比如這件商品只剩一件了,你買了,其他用戶就沒貨了,這也就是全局?jǐn)?shù)據(jù)狀態(tài)共享的意義.

ok了.學(xué)會(huì)了這些,那就直接展示代碼了,感覺條例還是比較清晰的.

文件結(jié)構(gòu)

|-- src(業(yè)務(wù)文件夾)? ? ? ??---------------互聯(lián)網(wǎng)世界

? ? |--pages(普通組件文件夾)? ? --------------電商領(lǐng)域? ? ?

? ? ? ? |--index.jsx(demo父組件)? ? --------------消費(fèi)者集合

? ? ? ? |--demo1.jsx(子組件1)? ?--------------消費(fèi)者1

? ? ? ? |--demo2.jsx(子組件2)? ?--------------消費(fèi)者2

? ? |--redux(redux文件夾)

? ? ? ? |--actions(修改demo1數(shù)據(jù)狀態(tài)的操作函數(shù)集合)? ------------消費(fèi)者購物方式集合

? ? ? ? ? ? |--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(全局?jǐn)?shù)據(jù)集合)? --------------網(wǎng)店集合

? ? ? ? |--store.js(全局?jǐn)?shù)據(jù)的載體)? ?---------------電商網(wǎng)站

|--App.jsx(根組件)?

|--main.jsx(項(xiàng)目入口組件)???---------------互聯(lián)網(wǎng)

大概就是這么一個(gè)比喻,希望看客老爺們能理解我的這種比喻

某位大佬創(chuàng)建了一個(gè)電商網(wǎng)站,叫做四道(store).store里面可以創(chuàng)建很多網(wǎng)店,這些網(wǎng)店叫做瑞丟瑟斯(reducers).現(xiàn)在兩個(gè)消費(fèi)者,戴某1和戴某2,有兩個(gè)店鋪叫做demo1和demo2.

戴某1看上了demo1店鋪的一件商品,情侶表,這個(gè)商品只有2件了,然后demo1就買了他,他將這個(gè)商品的接收地址分別發(fā)給了他自己和他對(duì)象那里,這個(gè)怎么買是他自己決定的,這個(gè)操作就是艾克神(action).因?yàn)榇髂?買了這兩件件商品,demo1店鋪里面就沒有這兩件商品了.等到戴某2也想買這件商品的時(shí)候,發(fā)現(xiàn)這件商品已經(jīng)空了.所以,店鋪練得商品就是全局的數(shù)據(jù)or狀態(tài).

ok了,上具體代碼:

代碼

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ù)組合,形成一個(gè)全局的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'//將會(huì)在store上暴露的模塊
export default combineReducers({demo1,demo2
})

redux/reducers/demo1.js

const initValue = 0
export default function demo1(value = initValue,action){console.log(action,'點(diǎn)擊了')const {type,data} = actionswitch(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 datadefault: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

感覺有用的就給個(gè)贊吧,謝啦!