您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)使用react和redux怎么實(shí)現(xiàn)一個(gè)計(jì)數(shù)器功能,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
Redux,本身就是一個(gè)單純的狀態(tài)管理者,我們不追溯它的歷史,從使用角度來說:它提供一個(gè)全局的對(duì)象store,store中包含state對(duì)象用以包含所有應(yīng)用數(shù)據(jù),并且store提供了一些reducer方法。這些方法可以自定義,使用調(diào)用者得以改變state的值。state的值僅為只讀,如果需要更改則必須只能通過reducer。
Redux
核心對(duì)象:store
數(shù)據(jù)存儲(chǔ):state
狀態(tài)更新提交接口:==dispatch==
狀態(tài)更新提交參數(shù):帶type和payload的==Action==
狀態(tài)更新計(jì)算:==reducer==
限制:reducer必須是純函數(shù),不支持異步
特性:支持中間件
React + Redux
在recat中不使用redux 時(shí)遇到的問題
在react中組件通信的數(shù)據(jù)是單向的,頂層組件可以通過props屬性向下層組件傳遞數(shù)據(jù),而下層組件不能向上層組件傳遞數(shù)據(jù),要實(shí)現(xiàn)下層組件修改數(shù)據(jù),需要上層組傳遞修改數(shù)據(jù)的方法到下層組件,當(dāng)項(xiàng)目越來越的時(shí)候,組件之間傳遞數(shù)據(jù)變得越來越困難
使用redux管理數(shù)據(jù),由于Store獨(dú)立于組件,使得數(shù)據(jù)管理獨(dú)立于組件,解決了組件之間傳遞數(shù)據(jù)困難的問題
下載redux
npm install redux react-redux
組件通過 dispatch 觸發(fā)action
store 接受 action 并將 action 分發(fā)給 reducer
reducer 根據(jù) action 類型對(duì)狀態(tài)進(jìn)行更改并將更改后的數(shù)據(jù)返回給store
組件訂閱了store中的狀態(tài),store中的狀態(tài)更新會(huì)同步到組件
1.創(chuàng)建項(xiàng)目,并安裝 redux
# 如果沒有安裝react腳手架則執(zhí)行這條命令安裝reate腳手架 npm install -g create-react-app # 創(chuàng)建reate項(xiàng)目 create-react-app 項(xiàng)目名 # 進(jìn)入項(xiàng)目 cd 項(xiàng)目名 # 安裝 redux npm install redux reate-redux
2.引入redux,并根據(jù)開始實(shí)現(xiàn)的代碼在react中實(shí)現(xiàn)計(jì)數(shù)器
//index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { createStore } from 'redux'; const initialState = { count: 0 } function reducer(state = initialState, action) { switch (action.type) { case 'increment': return { count: state.count + 1 } case 'decrement': return { count: state.count - 1 } default: return state } } const store = createStore(reducer) const increment = { type: 'increment' } const decrement = { type: 'decrement' } function Count() { return <div> <button onClick={() => store.dispatch(increment)}>+</button> <span>{store.getState().count}</span> <button onClick={() => store.dispatch(decrement)}>-</button> </div> } store.subscribe( () => { console.log(store.getState()) ReactDOM.render( <React.StrictMode> <Count /> </React.StrictMode>, document.getElementById('root') ); }) ReactDOM.render( <React.StrictMode> <Count /> </React.StrictMode>, document.getElementById('root') );
明顯以上方式雖然可以實(shí)現(xiàn)計(jì)數(shù)器的功能,但在實(shí)際項(xiàng)目中肯定不能這樣使用,因?yàn)榻M件一般都在單獨(dú)的文件中的,這種方式明顯在其他組件中并不能獲取到Store。
為了解決Store獲取問題需要使用react-redux來解決這個(gè)問題,react-redux給我們提供了Provider組件和connect方法
Provide 組件
是一個(gè)組件 可以吧創(chuàng)建出來的store 放在一個(gè)全局的地方,讓組件可以拿到store,通過provider組件,將 store 放在了全局的組件可以夠的到的地方 ,provider要求我們放在最外層組件
connect
connect 幫助我們訂閱store中的狀態(tài),狀態(tài)發(fā)生改變后幫助我們重新渲染組件
通過 connect 方法我們可以拿到 store 中的狀態(tài) 把 store 中的狀態(tài)映射到props中
通過 connect 方法可以拿到 dispatch 方法
connect 的參數(shù)為一個(gè)函數(shù) 這個(gè)函數(shù)可以拿到store中的狀態(tài),要求我們這個(gè)函數(shù)必須返回一個(gè)對(duì)象,在這個(gè)對(duì)象中寫的內(nèi)容都會(huì)映射給組件的props屬性
connect 調(diào)用后返回一個(gè)函數(shù) 返回的這個(gè)函數(shù)繼續(xù)調(diào)用需要傳入組件告訴connect需要映射到那個(gè)組件的props
新建 Component 文件夾、創(chuàng)建 Count.js 文件
import React from 'react' function Count() { return <div> <button onClick={() => store.dispatch(increment)}>+</button> <span>{store.getState().count}</span> <button onClick={() => store.dispatch(decrement)}>-</button> </div> } export default Count
引入 Provider 組件放置在最外層,并制定store
ReactDOM.render( // 通過provider組件 將 store 放在了全局的組件可以夠的到的地方 provider要求我們放在最外層組件 <Provider store={store}><Count /></Provider>, document.getElementById('root') );
引入 connect 方法 根據(jù) connect 的使用來包裹組件
const mapStateProps = state => ({ count: state.count, a: '1' }) // connect 的參數(shù)為一個(gè)函數(shù) 這個(gè)函數(shù)可以拿到store中的狀態(tài),要求我們這個(gè)函數(shù)必須返回一個(gè)對(duì)象,在這個(gè)對(duì)象中寫的內(nèi)容都會(huì)映射給組件的props屬性 // connect 調(diào)用后返回一個(gè)函數(shù) 返回的這個(gè)函數(shù)繼續(xù)調(diào)用需要傳入組件告訴connect需要映射到那個(gè)組件的props export default connect(mapStateProps)(Count)
改造 Count 組件把 action 復(fù)制到該文件中
const increment = { type: 'increment' } const decrement = { type: 'decrement' } function Count({count,dispatch}) { return <div> <button onClick={() => {dispatch(increment)}}>+</button> <span>{count}</span> <button onClick={() => {dispatch(decrement)}}>-</button> </div> }
現(xiàn)在項(xiàng)目已經(jīng)可以運(yùn)行了但是Count組件中的 提交Action的那一長串代碼影響視圖的可讀性,所以代碼還是需要優(yōu)化
我們希望視圖中直接調(diào)用一個(gè)函數(shù)這樣視圖代碼可讀性強(qiáng),這個(gè)需要利用connect的第二個(gè)參數(shù),第二個(gè)參數(shù)是一個(gè)函數(shù),這個(gè)函數(shù)的形參就是dispatch方法,要求這個(gè)函數(shù)返回一個(gè)對(duì)象,返回的這個(gè)對(duì)象中的內(nèi)容都會(huì)映射到組件的props屬性上
申明一個(gè)變量為connect中的第二個(gè)參數(shù),在這個(gè)變量中返回執(zhí)行不同action操作的對(duì)象
// connect 的第二個(gè)參數(shù) 這個(gè)參數(shù)是個(gè)函數(shù) 這個(gè)函數(shù)的形參就是dispatch方法 要求返回一個(gè)對(duì)象 這個(gè)對(duì)象中的屬性會(huì)被映射到組件的props上 const mapDispatchToProps = dispatch => ({ increment (){ dispatch({ type: 'increment' }) }, decrement (){ dispatch({ type: 'decrement' }) } }) // connect 的參數(shù)為一個(gè)函數(shù) 這個(gè)函數(shù)可以拿到store中的狀態(tài),要求我們這個(gè)函數(shù)必須返回一個(gè)對(duì)象,在這個(gè)對(duì)象中寫的內(nèi)容都會(huì)映射給組件的props屬性 // connect 調(diào)用后返回一個(gè)函數(shù) 返回的這個(gè)函數(shù)繼續(xù)調(diào)用需要傳入組件告訴connect需要映射到那個(gè)組件的props export default connect(mapStateProps, mapDispatchToProps)(Count)
在組件中結(jié)構(gòu)props在視圖中直接綁定事件
function Count({count,increment,decrement}) { return <div> <button onClick={increment}>+</button> <span>{count}</span> <button onClick={decrement}>-</button> </div> }
通過這次優(yōu)化我們發(fā)現(xiàn) 調(diào)用 dispatch 觸發(fā)action 的方法的代碼都是重復(fù)的,所以還需要繼續(xù)優(yōu)化
利用 bindActionCreators 來簡化 dispatch 觸發(fā) action的操作,bindActionCreators來幫助我們生成執(zhí)行action動(dòng)作的函數(shù)
bindActionCreators 有兩個(gè)參數(shù),第一個(gè)參數(shù)為 執(zhí)行action的對(duì)象,第二個(gè)參數(shù)為 dispatch方法
分離action操作,新建store/actions/counter.actions.js文件把執(zhí)行action操作單獨(dú)放在這個(gè)文件并導(dǎo)出
export const increment = () => ({type: 'increment'}) export const decrement = () => ({type: 'decrement'})
在Count.js中導(dǎo)入關(guān)于計(jì)數(shù)器的action,用bindActionCreators方法來生成dispatch執(zhí)行action函數(shù)
import { bindActionCreators } from 'redux' import * as counterActions from './../store/actions/counter.actions' const mapDispatchToProps = dispatch => (bindActionCreators(counterActions, dispatch)) // connect 的參數(shù)為一個(gè)函數(shù) 這個(gè)函數(shù)可以拿到store中的狀態(tài),要求我們這個(gè)函數(shù)必須返回一個(gè)對(duì)象,在這個(gè)對(duì)象中寫的內(nèi)容都會(huì)映射給組件的props屬性 // connect 調(diào)用后返回一個(gè)函數(shù) 返回的這個(gè)函數(shù)繼續(xù)調(diào)用需要傳入組件告訴connect需要映射到那個(gè)組件的props export default connect(mapStateProps, mapDispatchToProps)(Count)
代碼優(yōu)化到這里我們發(fā)現(xiàn),redux的代碼與組件融合在一起,所以我需要拆分成獨(dú)立的,為什么要抽離redux呢?因?yàn)槲覀円屛覀兊拇a結(jié)構(gòu)更加合理
把reducer函數(shù)抽離為單獨(dú)的文件、把創(chuàng)建store抽離到單獨(dú)的文件中
因?yàn)樵趓educer 和 actions中我們都寫了字符串,但是字符串沒有提示所以我們把字符串定義成常量防止我們出現(xiàn)單詞錯(cuò)誤這種低級(jí)錯(cuò)誤,新建 src/store/const/counter.const.js 文件
export const INCREMENT = 'increment' export const DECREMENT = 'decrement'
新建 src/store/reducers/counter.reducers.js 文件把 reducer 函數(shù)抽離到此文件中
import { INCREMENT, DECREMENT} from './../const/counter.const' const initialState = { count: 0 } // eslint-disable-next-line import/no-anonymous-default-export export default (state = initialState, action) => { switch (action.type) { case INCREMENT: return { count: state.count + 1 } case DECREMENT: return { count: state.count - 1 } default: return state } }
更改actions中的字符串為引入變量
import { INCREMENT, DECREMENT} from './../const/counter.const' export const increment = () => ({type: INCREMENT}) export const decrement = () => ({type: DECREMENT})
創(chuàng)建src/store/index.js文件 ,在這個(gè)文件中創(chuàng)建store 并導(dǎo)出
import { createStore } from 'redux'; import reducer from './reducers/counter.reducers' export const store = createStore(reducer)
在引入store的文件中改變?yōu)闆_項(xiàng)目中store文件中引入store
import React from 'react'; import ReactDOM from 'react-dom'; import Count from './components/Count'; import { store } from './store' import { Provider } from 'react-redux' /** * react-redux 讓react 和 redux 完美結(jié)合 * Provider 是一個(gè)組件 可以吧創(chuàng)建出來的store 放在一個(gè)全局的地方 讓組件可以拿到store * connect 是一個(gè)方法 */ ReactDOM.render( // 通過provider組件 將 store 放在了全局的組件可以夠的到的地方 provider要求我們放在最外層組件 <Provider store={store}><Count /></Provider>, document.getElementById('root') );
這個(gè)計(jì)數(shù)器案例已經(jīng)實(shí)現(xiàn)了點(diǎn)擊按鈕加一減一操作了,現(xiàn)在有個(gè)新需求我們需要加減一個(gè)數(shù)值例如加五減五
這就需要對(duì)action傳遞參數(shù)了
在視圖中按鈕綁定函數(shù)傳入?yún)?shù)
function Count({count,increment,decrement}) { return <div> <button onClick={() => increment(5)}>+</button> <span>{count}</span> <button onClick={() => decrement(5)}>-</button> </div> }
在dispacth執(zhí)行action動(dòng)作時(shí)接受參數(shù)并傳入到action中
export const increment = payload => ({type: INCREMENT, payload}) export const decrement = payload => ({type: DECREMENT, payload})
在reducers中接收參數(shù)并作相應(yīng)處理
export default (state = initialState, action) => { switch (action.type) { case INCREMENT: return { count: state.count + action.payload } case DECREMENT: return { count: state.count - action.payload } default: return state } }
以上就是使用react和redux怎么實(shí)現(xiàn)一個(gè)計(jì)數(shù)器功能,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。