Redux模塊化拆分reducer函數(shù)流程介紹

更新時(shí)間：2022年09月29日 09:43:38 作者：月光曬了很涼快

Reducer是個(gè)純函數(shù)，即只要傳入相同的參數(shù)，每次都應(yīng)返回相同的結(jié)果。不要把和處理數(shù)據(jù)無關(guān)的代碼放在Reducer里，讓Reducer保持純凈，只是單純地執(zhí)行計(jì)算，這篇文章主要介紹了Redux拆分reducer函數(shù)流程

1. 概述

使用 redux 庫中提供的 combineReducers 方法，可以將多個(gè)拆分 reducer 函數(shù)合并成統(tǒng)一的 reducer 函數(shù)，提供給 createStore 來使用。我們可以將 Redux 進(jìn)行模塊化拆分，再利用這個(gè)函數(shù)，將多個(gè)拆分 reducer 函數(shù)合并成統(tǒng)一的 reducer 函數(shù)，再傳給 createStore 來使用。

2. 方式1-單純文件拆分

redux 入口文件（store/index.js）：

// 導(dǎo)入redux中的createStore創(chuàng)建倉庫數(shù)據(jù)的方法
// combineReducers 用來合并多個(gè)拆分后的 reducer方式,返回一個(gè)新 reducer
// applyMiddleware 擴(kuò)展redux功能
import { createStore, combineReducers, applyMiddleware } from 'redux'
// 配合瀏覽器安裝的插件來進(jìn)行redux調(diào)試所用  
// 開發(fā)時(shí)有用，生產(chǎn)要關(guān)閉
import { composeWithDevTools } from '@redux-devtools/extension'
// 導(dǎo)入拆分開的模塊
import count from './reducers/count'
import film from './reducers/film'
// 合并多個(gè)模塊中的 reducer 函數(shù)，并且返回一個(gè)新的 reducer 函數(shù)
const reducer = combineReducers({
  // key:value
  // key：它是在獲取 state 數(shù)據(jù)時(shí)的命名空間名稱，redux 中沒有 dispatch 操作的命名空間名稱
  // 如果你進(jìn)行了 redux 模塊化拆分，則需要注意 type 的類型名稱不能重名，如果重名則都會(huì)執(zhí)行
  // type: 以拆分后的文件名稱為前綴：xxx_type 類型名，不會(huì)重名
  // value：拆分后的 reducr 純函數(shù)
  count,
  film
})
const store = createStore(
  reducer,
  composeWithDevTools()
)
// 導(dǎo)出
export default store

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

// 計(jì)數(shù)模塊
// 初始state數(shù)據(jù)
const initState = {
  num: 100
}
// 定義一個(gè)純函數(shù)reducer，專門用來操作state中的數(shù)據(jù),要返回一個(gè)新的state
const reducer = (state = initState, action) => {
  if (action.type === 'count_add_num') return { ...state, num: state.num + action.payload }
  return state;
}
// 導(dǎo)出
export default reducer

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

// 電影列表展示模塊
// 初始state數(shù)據(jù)
const initState = {
  nowplayings: []
}
// 定義一個(gè)純函數(shù)reducer，專門用來操作state中的數(shù)據(jù),要返回一個(gè)新的state
const reducer = (state = initState, action) => {
  if (action.type === 'film_set_nowplayings') return { ...state, nowplayings: action.payload }
  return state;
}
// 導(dǎo)出
export default reducer

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

import { connect } from 'react-redux'
// todo... 一會(huì)要配置路徑別名，它引入時(shí)就會(huì)短一些
// 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

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

// 計(jì)數(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

上面是同步操作的模塊拆分（針對(duì)計(jì)數(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進(jìn)行模塊拆分

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

傳送門

概述：

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

安裝：

yarn add redux-thunk

使用：

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

index.js：

// 導(dǎo)入redux中的createStore創(chuàng)建倉庫數(shù)據(jù)的方法
// combineReducers 用來合并多個(gè)拆分后的 reducer方式,返回一個(gè)新 reducer
// applyMiddleware 擴(kuò)展redux功能
import { createStore, combineReducers, applyMiddleware } from 'redux'
// 配合瀏覽器安裝的插件來進(jìn)行redux調(diào)試所用  
// 開發(fā)時(shí)有用，生產(chǎn)要關(guān)閉
import { composeWithDevTools } from '@redux-devtools/extension'
// 導(dǎo)入拆分開的模塊
import count from './reducers/count'
import film from './reducers/film'
import thunk from 'redux-thunk'
// 合并多個(gè)模塊中的 reducer 函數(shù)，并且返回一個(gè)新的 reducer 函數(shù)
const reducer = combineReducers({
  count,
  film
})
const store = createStore(
  reducer,
  composeWithDevTools(applyMiddleware(thunk))
)
// 導(dǎo)出
export default store

connect.js：

import { connect } from 'react-redux'
// actions 這是一個(gè)對(duì)象 {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))
}