Redux模块化拆分reducer函数流程介绍_React_

// 导入redux中的createStore创建仓库数据的方法 // combineReducers 用来合并多个拆分后的 reducer方式,返回一个新 reducer // applyMiddleware 扩展redux功能 import { createStore, combineReducers, applyMiddleware } from 'redux' // 配合浏览器安装的插件来进行redux调试所用 // 开发时有用，生产要关闭 import { composeWithDevTools } from '@redux-devtools/extension' // 导入拆分开的模块 import count from './reducers/count' import film from './reducers/film' // 合并多个模块中的 reducer 函数，并且返回一个新的 reducer 函数 const reducer = combineReducers({ // key:value // key：它是在获取 state 数据时的命名空间名称，redux 中没有 dispatch 操作的命名空间名称 // 如果你进行了 redux 模块化拆分，则需要注意 type 的类型名称不能重名，如果重名则都会执行 // type: 以拆分后的文件名称为前缀：xxx_type 类型名，不会重名 // value：拆分后的 reducr 纯函数 count, film }) const store = createStore( reducer, composeWithDevTools() ) // 导出 export default store

// 计数模块 // 初始state数据 const initState = { num: 100 } // 定义一个纯函数reducer，专门用来操作state中的数据,要返回一个新的state const reducer = (state = initState, action) => { if (action.type === 'count_add_num') return { ...state, num: state.num + action.payload } return state; } // 导出 export default reducer

// 电影列表展示模块 // 初始state数据 const initState = { nowplayings: [] } // 定义一个纯函数reducer，专门用来操作state中的数据,要返回一个新的state const reducer = (state = initState, action) => { if (action.type === 'film_set_nowplayings') return { ...state, nowplayings: action.payload } return state; } // 导出 export default reducer

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)

export default dispatch => ({ add(n = 1) { dispatch({ type: 'count_add_num', payload: n }) } }) 

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 ( 
nowplaying -- count
 {/* 定义路由规则 */} 
 ) } } export default App

// 计数组件 import React, { Component } from 'react' import connect from './connect' @connect class Count extends Component { render() { return ( 
{this.props.num}
 this.props.add()}>累加NUM
 ) } } export default Count

import { connect } from 'react-redux' import filmAction from '@/store/actionCreators/filmAction' export default connect(state => state.film, dispatch => filmAction(dispatch)) 

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 }) // } // })

import { get } from '@/utils/http' export const getNowPlayingFilmListApi = (page = 1) => { return get(`/api/v1/getNowPlayingFilmList?cityId=110100&pageNum=${page}&pageSize=10`) } 

// 电影展示列表组件 import React, { Component } from 'react' import connect from './connect' @connect class Nowplaying extends Component { componentDidMount() { this.props.add() } render() { return ( 
 {this.props.nowplayings.length === 0 ? ( 
加载中...
 ) : ( this.props.nowplayings.map(item =>
{item.name}
) )} 
 ) } } export default Nowplaying

// 导入redux中的createStore创建仓库数据的方法 // combineReducers 用来合并多个拆分后的 reducer方式,返回一个新 reducer // applyMiddleware 扩展redux功能 import { createStore, combineReducers, applyMiddleware } from 'redux' // 配合浏览器安装的插件来进行redux调试所用 // 开发时有用，生产要关闭 import { composeWithDevTools } from '@redux-devtools/extension' // 导入拆分开的模块 import count from './reducers/count' import film from './reducers/film' import thunk from 'redux-thunk' // 合并多个模块中的 reducer 函数，并且返回一个新的 reducer 函数 const reducer = combineReducers({ count, film }) const store = createStore( reducer, composeWithDevTools(applyMiddleware(thunk)) ) // 导出 export default store

import { connect } from 'react-redux' // actions 这是一个对象 {a:funtion(){}} import * as actions from '@/store/actionCreators/filmAction' export default connect(state => state.film, actions) 

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)) }