第Redux模塊化拆分reducer函數(shù)流程介紹目錄1.概述2.方式1-單純文件拆分3.方式2-使用中間件redux-thunk進行模塊拆分

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）：

//導(dǎo)入redux中的createStore創(chuàng)建倉庫數(shù)據(jù)的方法

//combineReducers用來合并多個拆分后的reducer方式,返回一個新reducer

//applyMiddleware擴展redux功能

import{createStore,combineReducers,applyMiddleware}from'redux'

//配合瀏覽器安裝的插件來進行redux調(diào)試所用

//開發(fā)時有用，生產(chǎn)要關(guān)閉

import{composeWithDevTools}from'@redux-devtools/extension'

//導(dǎo)入拆分開的模塊

importcountfrom'./reducers/count'

importfilmfrom'./reducers/film'

//合并多個模塊中的reducer函數(shù)，并且返回一個新的reducer函數(shù)

constreducer=combineReducers({

//key:value

//key：它是在獲取state數(shù)據(jù)時的命名空間名稱，redux中沒有dispatch操作的命名空間名稱

//如果你進行了redux模塊化拆分，則需要注意type的類型名稱不能重名，如果重名則都會執(zhí)行

//type:以拆分后的文件名稱為前綴：xxx_type類型名，不會重名

//value：拆分后的reducr純函數(shù)

count,

film

conststore=createStore(

reducer,

composeWithDevTools()

//導(dǎo)出

exportdefaultstore

計數(shù)模塊（count.js）：

//計數(shù)模塊

//初始state數(shù)據(jù)

constinitState={

num:100

//定義一個純函數(shù)reducer，專門用來操作state中的數(shù)據(jù),要返回一個新的state

constreducer=(state=initState,action)={

if(action.type==='count_add_num')return{...state,num:state.num+action.payload}

returnstate;

//導(dǎo)出

exportdefaultreducer

電影列表模塊（film.js）：

//電影列表展示模塊

//初始state數(shù)據(jù)

constinitState={

nowplayings:[]

//定義一個純函數(shù)reducer，專門用來操作state中的數(shù)據(jù),要返回一個新的state

constreducer=(state=initState,action)={

if(action.type==='film_set_nowplayings')return{...state,nowplayings:action.payload}

returnstate;

//導(dǎo)出

exportdefaultreducer

計數(shù)器模塊的裝飾器函數(shù)（connect.js）：

import{connect}from'react-redux'

//todo...一會要配置路徑別名，它引入時就會短一些

//importcountActionfrom'../../store/actionCreators/countAction'

importcountActionfrom'@/store/actionCreators/countAction'

constmapDispatchToProps=dispatch=({

...countAction(dispatch)

exportdefaultconnect(state=state.count,mapDispatchToProps)

countAction.js：

exportdefaultdispatch=({

add(n=1){

dispatch({type:'count_add_num',payload:n})

App.jsx：

importReact,{Component}from'react'

import{Switch,Route,Link}from'react-router-dom'

importCountfrom'./views/Count'

importNowplayingfrom'./views/Nowplaying'

classAppextendsComponent{

render(){

return(

div

div

Linkto='/nowplaying'nowplaying/Link--

Linkto='/count'count/Link

/div

hr/

{/*定義路由規(guī)則*/}

Switch

Routepath="/nowplaying"component={Nowplaying}/

Routepath="/count"component={Count}/

/Switch

/div

exportdefaultApp

計數(shù)器視圖（index.jsx）：

//計數(shù)組件

importReact,{Component}from'react'

importconnectfrom'./connect'

@connect

classCountextendsComponent{

render(){

return(

div

h3{ps.num}/h3

button()=ps.add()}累加NUM/button

/div

exportdefaultCount

上面是同步操作的模塊拆分（針對計數(shù)器模塊做的演示），下面是異步操作的模塊化拆分，以電影播放列表為例。

電影模塊的裝飾器函數(shù)（connect.js）：

import{connect}from'react-redux'

importfilmActionfrom'@/store/actionCreators/filmAction'

exportdefaultconnect(state=state.film,dispatch=filmAction(dispatch))

filmAction.js：

import{getNowPlayingFilmListApi}from'@/api/filmApi'

exportdefaultdispatch=({

add(page=1){

getNowPlayingFilmListApi(page).then(ret={

dispatch({type:'film_set_nowplayings',payload:ret.data.films})

//async和await寫法

//exportdefaultdispatch=({

//asyncadd(page=1){

//letret=awaitgetNowPlayingFilmListApi(page)

//dispatch({type:'film_set_nowplayings',payload:ret.data.films})

//})

filmApi.js：

import{get}from'@/utils/http'

exportconstgetNowPlayingFilmListApi=(page=1)={

returnget(`/api/v1/getNowPlayingFilmListcityId=110100pageNum=${page}pageSize=10`)

電影模塊視圖（index.jsx）：

//電影展示列表組件

importReact,{Component}from'react'

importconnectfrom'./connect'

@connect

classNowplayingextendsComponent{

componentDidMount(){

ps.add()

render(){

return(

div

{ps.nowplayings.length===0(

div加載中.../div

):(

ps.nowplayings.map(item=divkey={item.filmId}{}/div)

/div

exportdefaultNowplaying

3.方式2-使用中間件redux-thunk進行模塊拆分

關(guān)于Redux的中間件的原理，可以去閱讀下面這篇文章，文章寫得非常精彩！

傳送門

概述：

redux-thunk它是由redux官方開發(fā)出來的redux中間件，它的作用：解決redux中使用異步處理方案。redux-thunk中間件可以允許在connect參數(shù)2中派發(fā)任務(wù)時返回的是一個函數(shù)，此函數(shù)形參中，redux-thunk會自動注入一個dispatch派發(fā)函數(shù)，從而讓你調(diào)用dispath函數(shù)來派發(fā)任務(wù)給redux，從而實現(xiàn)異步處理。

安裝：

yarnaddredux-thunk

使用：

上文提到了對異步操作的處理，在上文基礎(chǔ)上，我們修改成使用中間件進行處理的寫法。

index.js：

//導(dǎo)入redux中的createStore創(chuàng)建倉庫數(shù)據(jù)的方法

//combineReducers用來合并多個拆分后的reducer方式,返回一個新reducer

//applyMiddleware擴展redux功能

import{createStore,combineReducers,applyMiddleware}from'redux'

//配合瀏覽器安裝的插件來進行redux調(diào)試所用

//開發(fā)時有用，生產(chǎn)要關(guān)閉

import{composeWithDevTools}from'@redux-devtools/extension'

//導(dǎo)入拆分開的模塊

importcountfrom'./reducers/count'

importfilmfrom'./reducers/film'

importthunkfrom'redux-thunk'

//合并多個模塊中的reducer函數(shù)，并且返回一個新的reducer函數(shù)

constreducer=combineReducers({

count,

film

conststore=createStore(

reducer,

composeWithDevTools(applyMiddleware(thunk))

//導(dǎo)出

exportdefaultstore

connect.js：

import{connect}from'react-redux'

//actions這是一個對象{a:funtion(){}}

import*asactionsfrom'@/store/actionCreators/filmAction'

exportdefaultconnect(state=state.film,actions)

filmAction.js：