Redux模塊化拆分reducer函數(shù)流程介紹
更新時間：2022年09月29日 09:43:38 作者：月光曬了很涼快
Reducer是個純函數(shù)，即只要傳入相同的參數(shù)，每次都應返回相同的結果。不要把和處理數(shù)據(jù)無關的代碼放在Reducer里，讓Reducer保持純凈，只是單純地執(zhí)行計算，這篇文章主要介紹了Redux拆分reducer函數(shù)流程
1. 概述
使用 redux 庫中提供的 combineReducers 方法，可以將多個拆分 reducer 函數(shù)合并成統(tǒng)一的 reducer 函數(shù)，提供給 createStore 來使用。我們可以將 Redux 進行模塊化拆分，再利用這個函數(shù)，將多個拆分 reducer 函數(shù)合并成統(tǒng)一的 reducer 函數(shù)，再傳給 createStore 來使用。
2. 方式1-單純文件拆分
redux 入口文件（store/index.js）：
// 導入redux中的createStore創(chuàng)建倉庫數(shù)據(jù)的方法
// combineReducers 用來合并多個拆分后的 reducer方式,返回一個新 reducer
// applyMiddleware 擴展redux功能
import { createStore, combineReducers, applyMiddleware } from 'redux'
// 配合瀏覽器安裝的插件來進行redux調(diào)試所用
// 開發(fā)時有用，生產(chǎn)要關閉
import { composeWithDevTools } from '@redux-devtools/extension'
// 導入拆分開的模塊
import count from './reducers/count'
import film from './reducers/film'
// 合并多個模塊中的 reducer 函數(shù)，并且返回一個新的 reducer 函數(shù)
const reducer = combineReducers({
// key:value
// key：它是在獲取 state 數(shù)據(jù)時的命名空間名稱，redux 中沒有 dispatch 操作的命名空間名稱
// 如果你進行了 redux 模塊化拆分，則需要注意 type 的類型名稱不能重名，如果重名則都會執(zhí)行
// type: 以拆分后的文件名稱為前綴：xxx_type 類型名，不會重名
// value：拆分后的 reducr 純函數(shù)
count,
film
})
const store = createStore(
reducer,
composeWithDevTools()
)
// 導出
export default store計數(shù)模塊（count.js）：
// 計數(shù)模塊
// 初始state數(shù)據(jù)
const initState = {
num: 100
}
// 定義一個純函數(shù)reducer，專門用來操作state中的數(shù)據(jù),要返回一個新的state
const reducer = (state = initState, action) => {
if (action.type === 'count_add_num') return { ...state, num: state.num + action.payload }
return state;
}
// 導出
export default reducer電影列表模塊（film.js）：
// 電影列表展示模塊
// 初始state數(shù)據(jù)
const initState = {
nowplayings: []
}
// 定義一個純函數(shù)reducer，專門用來操作state中的數(shù)據(jù),要返回一個新的state
const reducer = (state = initState, action) => {
if (action.type === 'film_set_nowplayings') return { ...state, nowplayings: action.payload }
return state;
}
// 導出
export default reducer計數(shù)器模塊的裝飾器函數(shù)（connect.js）：
import { connect } from 'react-redux'
// todo... 一會要配置路徑別名，它引入時就會短一些
// import countAction from '../../store/actionCreators/countAction'
import countAction from '@/store/actionCreators/countAction'
const mapDispatchToProps = dispatch => ({
...countAction(dispatch)
})
export default connect(state => state.count, mapDispatchToProps)countAction.js：
export default dispatch => ({
add(n = 1) {
dispatch({ type: 'count_add_num', payload: n })
}
})
App.jsx：
import React, { Component } from 'react'
import { Switch, Route, Link } from 'react-router-dom'
import Count from './views/Count'
import Nowplaying from './views/Nowplaying'
class App extends Component {
render() {
return (
<div>
<div>
<Link to='/nowplaying'>nowplaying</Link> --
<Link to='/count'>count</Link>
</div>
<hr />
{/* 定義路由規(guī)則 */}
<Switch>
<Route path="/nowplaying" component={Nowplaying} />
<Route path="/count" component={Count} />
</Switch>
</div>
)
}
}
export default App計數(shù)器視圖（index.jsx）：
// 計數(shù)組件
import React, { Component } from 'react'
import connect from './connect'
@connect
class Count extends Component {
render() {
return (
<div>
<h3>{this.props.num}</h3>
<button onClick={() => this.props.add()}>累加NUM</button>
</div>
)
}
}
export default Count
上面是同步操作的模塊拆分（針對計數(shù)器模塊做的演示），下面是異步操作的模塊化拆分，以電影播放列表為例。
電影模塊的裝飾器函數(shù)（connect.js）：
import { connect } from 'react-redux'
import filmAction from '@/store/actionCreators/filmAction'
export default connect(state => state.film, dispatch => filmAction(dispatch))
filmAction.js：
import { getNowPlayingFilmListApi } from '@/api/filmApi'
export default dispatch => ({
add(page = 1) {
getNowPlayingFilmListApi(page).then(ret => {
dispatch({ type: 'film_set_nowplayings', payload: ret.data.films })
})
}
})
// async 和 await 寫法
// export default dispatch => ({
// async add(page = 1) {
// let ret = await getNowPlayingFilmListApi(page)
// dispatch({ type: 'film_set_nowplayings', payload: ret.data.films })
// }
// })filmApi.js：
import { get } from '@/utils/http'
export const getNowPlayingFilmListApi = (page = 1) => {
return get(`/api/v1/getNowPlayingFilmList?cityId=110100&pageNum=${page}&pageSize=10`)
}
電影模塊視圖（index.jsx）：
// 電影展示列表組件
import React, { Component } from 'react'
import connect from './connect'
@connect
class Nowplaying extends Component {
componentDidMount() {
this.props.add()
}
render() {
return (
<div>
{this.props.nowplayings.length === 0 ? (
<div>加載中...</div>
) : (
this.props.nowplayings.map(item => <div key={item.filmId}>{item.name}</div>)
)}
</div>
)
}
}
export default Nowplaying
3. 方式2-使用中間件redux-thunk進行模塊拆分
關于 Redux 的中間件的原理，可以去閱讀下面這篇文章，文章寫得非常精彩！
概述：
redux-thunk 它是由 redux 官方開發(fā)出來的 redux 中間件，它的作用：解決 redux 中使用異步處理方案。redux-thunk 中間件可以允許在 connect 參數(shù) 2 中派發(fā)任務時返回的是一個函數(shù)，此函數(shù)形參中，redux-thunk 會自動注入一個 dispatch 派發(fā)函數(shù)，從而讓你調(diào)用 dispath 函數(shù)來派發(fā)任務給 redux，從而實現(xiàn)異步處理。
安裝：
yarn add redux-thunk
使用：
上文提到了對異步操作的處理，在上文基礎上，我們修改成使用中間件進行處理的寫法。
index.js：
// 導入redux中的createStore創(chuàng)建倉庫數(shù)據(jù)的方法
// combineReducers 用來合并多個拆分后的 reducer方式,返回一個新 reducer
// applyMiddleware 擴展redux功能
import { createStore, combineReducers, applyMiddleware } from 'redux'
// 配合瀏覽器安裝的插件來進行redux調(diào)試所用
// 開發(fā)時有用，生產(chǎn)要關閉
import { composeWithDevTools } from '@redux-devtools/extension'
// 導入拆分開的模塊
import count from './reducers/count'
import film from './reducers/film'
import thunk from 'redux-thunk'
// 合并多個模塊中的 reducer 函數(shù)，并且返回一個新的 reducer 函數(shù)
const reducer = combineReducers({
count,
film
})
const store = createStore(
reducer,
composeWithDevTools(applyMiddleware(thunk))
)
// 導出
export default storeconnect.js：
import { connect } from 'react-redux'
// actions 這是一個對象 {a:funtion(){}}
import * as actions from '@/store/actionCreators/filmAction'
export default connect(state => state.film, actions)
filmAction.js：
import { getNowPlayingFilmListApi } from '@/api/filmApi'
const addActionCreator = data => ({ type: 'film_set_nowplayings', payload: data })
// 異步
export const add = (page = 1) => async dispatch => {
let ret = await getNowPlayingFilmListApi(page)
dispatch(addActionCreator(ret.data.films))
}
到此這篇關于Redux模塊化拆分reducer函數(shù)流程介紹的文章就介紹到這了,更多相關Redux模塊化拆分內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
react實現(xiàn)一個優(yōu)雅的圖片占位模塊組件詳解
這篇文章主要給大家介紹了關于react如何實現(xiàn)一個還算優(yōu)雅的占位模塊圖片組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-10-10
react項目中使用react-dnd實現(xiàn)列表的拖拽排序功能
這篇文章主要介紹了react項目中使用react-dnd實現(xiàn)列表的拖拽排序,本文結合實例代碼講解react-dnd是如何實現(xiàn)，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
react路由跳轉(zhuǎn)傳參刷新頁面后參數(shù)丟失的解決
這篇文章主要介紹了react路由跳轉(zhuǎn)傳參刷新頁面后參數(shù)丟失的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
JavaScript?和?React?提供了靈活的事件處理機制,特別是通過利用事件的捕獲階段來阻止事件傳播可以實現(xiàn)精細的權限控制,本文將詳細介紹這一技術的應用,并通過實踐案例展示如何封裝和使用一個?React?鑒權組件,需要的可以參考下2024-03-03
React相比于Vue，更注重對JS的掌握，Vue把能做的都做了，只剩下最簡單的讓開發(fā)者使用，開發(fā)者需要記憶Vue的特定指令后就可很輕松地開發(fā)。相反，React是提供了一種思路和方式，沒有過多的限制，但要求會相對高些，需要開發(fā)者對JS達到精通的地步才能真正運用好React。2021-05-05
這篇文章主要介紹了在react中使用vue的狀態(tài)管理的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
React在組件中如何監(jiān)聽redux中state狀態(tài)的改變
這篇文章主要介紹了React在組件中如何監(jiān)聽redux中state狀態(tài)的改變，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了React如何實現(xiàn)模糊搜索和關鍵字高亮的效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-11-11
Node-sass是一個庫,它將Node.js綁定到LibSass（流行樣式表預處理器Sass的C版本）,它允許用戶以令人難以置信的速度將.scss文件本地編譯為css,并通過連接中間件自動編譯,下面這篇文章主要給大家介紹了關于React安裝node-sass失敗解決的相關資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了淺談react路由傳參的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03