redux 数据分块 （项目中使用）

redux 数据分块的使用

1. 在src文件夹下建一个reducer文件夹

2. 在reducer下建一个index.js文件用于统一管理其它的 reducer文件

   • reducer文件主要写各页面的逻辑（动作）

3. reducer下的index.js内容

   • 需要安装redux
   • import { combineReducers } from "redux"
   • 代码如下

     /**
      * 这个文件是rootReducer
      *  用于统一管理其它的  reducer文件
      */
     import { combineReducers } from "redux"
     import goodListSatte from "./good/goodListReducer"
     import poSearchReducer from "./finance/poSearchReducer"
     
     const rootReducer = combineReducers({
         //这里放其他的reducer
         goodListSatte,
         poSearchReducer
     })
     
     export default rootReducer
     

4. 在src下建一个store文件夹

5. 在store文件夹下建一个index.js文件来创建store

6. 在store文件下的index.js内容

   • 引入
     • import { createStore,applyMiddleware } from 'redux'
     • import rootReducer from '../reducer'
     • import thunk from "redux-thunk"//这是redux中间件，主要解决数据请求问题
   • applyMiddleware 主要是做数据请求的，没有数据请求就不需要
   • 代码如下

     // 创建store
     import { createStore,applyMiddleware } from 'redux'
     import rootReducer from '../reducer'
     import thunk from "redux-thunk"//这是redux中间件，主要解决数据请求问题
     
     const store = createStore( rootReducer,applyMiddleware(thunk) ) // 不加new   createStore() 参数不是一个 Object 而是一个Function
     // const store = createStore( rootReducer ) // 没有数据请求就直接这样写
     export default store 
     

7. 在src下入口文件index.js中修改

   • 引入
     • import { Provider} from "react-redux"
     • import store from "./store"
   • 使用
     • <Provider store = { store }></Provider>(在最外层)
   • 代码

     import ReactDom from 'react-dom'
     import { Provider} from "react-redux"
     import store from "./store"
     import App from "./App.js"
     
     ReactDom.render(
         <Provider store = { store }>
            <App/>
         </Provider>,
         document.getElementById('root')
     )
     

8. 在src下创建一个actions文件夹这里放项目中需要用到的方法和一些常量

9. 在actions文件夹下创建actionType.js文件来存放常量

10. actionType.js下内容

    • 创建一个常量代表一个方法的标识
    • 代码

      const GOOD = 'GOOD'
      module.exports = {GOOD}
      

11. 在actions文件夹下创建index.js用来放创建的方法

12. actions文件夹下index.js的内容

    • 代码（常规用法）

      import {GOOD} from "./actionType.js"
      export const good = (val) => {
          // 常规使用
          return {
              type:GOOD,
              value:val//传参
          }
      }
      

    • 代码（数据请求写法）

      import request from "../../request"//引入封装好的axios
      import {GOOD} from "./actionType.js"
      export const  good = (value) => {
          // 门店下拉后选择内容后触发
          return async dispatch => {
              const result = await request(
                  {
                      url:'/api/order/getDayAndMonthTotal',
                      method:'get',
                      params:{
                          storeId: 1,
                      }
                  }
              )
              dispatch({
                  type:GOOD,
                  value:value,//传参
                  res:result
              })
          }
      }
      

13. 在reducer文件夹下创建对应组件的文件夹名字

14. 如我在reducer文件夹下创建home文件夹

15. 在home文件夹下创建homeReducer.js文件

16. 在homeReducer.js文件下写组件各方法的逻辑

    • 代码

      import {GOOD} from "../../actions/actionType.js"
      const initState = {//定义初始化数据
          a:'1',
          selectedRowKeys: [], //商品列表复选框
          data:[],//列表数据
      }
      const goodListReducer = (state = initState,action)=>{
          const newState = {
              ...state
          }
          switch (action.type) {
              case GOOD:
                  //这里写逻辑(测试数据)
                  type.value
                  console.log('qqqqq')
                  //数据请求到的数据给store
                  // newState.a 获取上面定义的数据
                  break;
                  
                  default:
                  break;
          }
          return newState
      }
      export default goodListReducer //导出
      

17. 在reducer下的index.js中需要引入使用

    • 代码如下

      import { combineReducers } from "redux"
      import goodListReducer from "./home/homeReducer.js"
       
      const rootReducer = combineReducers({
          //这里放其他的reducer
          goodListSatte
      })
      
      export default rootReducer
      

18. 在组件中使用

    • 引入
      • import { connect } from "react-redux"
      • import { bindActionCreators } from "redux"
      • import {good } from "../../actions/index.js"//引入在action中定义的方法
    • 使用

      • 高阶组件的原理
        export default connect(callback,callback)(GoodList)
        第一个参数是将store中的state获取到
        第二个参数是将actions中的方法获取到 然后传递给当前组件

    • 代码

import React, { Component } from "react"
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import {good} from "../../actions"
class GoodList extends Component {
	componentDidMount(){
		this.props.state.a//获取redux定义的数据
		this.props.good()//调用redux的方法
	}
	render(){
		return(
			<div></div>
		)
	}
}

const mapStateFromProps = state => {
    console.log('state--',state)
    return {
        state :state.goodListSatte
    }
}
const mapDispatchFromProps = dispatch => {
    return bindActionCreators({good},dispatch)
}
export default connect(mapStateFromProps,mapDispatchFromProps)(GoodList)