Redux解耦合

React项目中使用Redux管理状态数据，导致组件中出现了大量store.method调用方式,让两个不同技术之间的代码的耦合度太高，不利于后期项目的维护
react提供了一个模块：react-redux，转么用于解耦合react组件，redux状态管理模式

Provider: 提供者的意思，提供数据管理桥梁，让redux中的数据可以在react组件中按照固定语法直接使用，避免大量的代码耦合
固定语法：将Provider组件包裹在React应用的根组件外部

import Provider from 'react-redux'
import store './store/index'
function() {
	return <Provider store={store}>
	其他组件
	</Provider>
}

connect（） ，用于管理指定的组件，映射数据state和操作方案action
固定语法：将默认组件的导出方式，连接到数据和操作的映射关系上

import {connect} from 'react-redux'
export default connect(映射state数据，映射action函数)(goods)

代码操作
安装react-redux

yarn add react-redux

编辑App.jsx

import {Provider} for 'react-redux'
...
function App() {
	return (
		<Provider><Goods/></Provider>
	)
}
...

import React, { Component} from 'react'
import './layout.css'
import { goodsAddAction,goodsEditAction,goodsDelAction } from './store/modules/actionCreator'
import {connect} from 'react-redux'
import store from './store'
class Layout extends Component {
    state={
        goodsList:store.getState().goods,
        hasId:null,
        values: {
            name:'',
            price:''
        }
    }
   componentDidMount() {
       store.subscribe(()=>{
           this.setState({})
       })
   }
    changeName=(event)=>{
        this.state.values.name = event.target.value
         this.setState({
      })
    }
    changePrice=(event)=>{
      this.state.values.price = event.target.value
      this.setState({
      })
    }
    submit=()=> {
        if(this.state.hasId) {
            // store.dispatch({type:'edit',data:{...this.state.values,id:this.state.hasId}})
        // store.dispatch(goodsEditAction({...this.state.values,id:this.state.hasId}))
            this.props.goodsEditAction({...this.state.values,id:this.state.hasId})
        }else {
            // store.dispatch({type:'add',data:this.state.values})
            // store.dispatch(goodsAddAction(this.state.values))
            this.props.goodsAddAction(this.state.values)
        }
     
        this.state.values.name = ''
        this.state.values.price = ''
        this.state.hasId = null
        this.setState({
            goodsList:store.getState().goods
        })
    }
    edit=(item)=>{
        console.log(item);
        this.state.values.name = item.name
        this.state.values.price = item.price
        this.state.hasId = item.id
        this.setState({})
    }
    deletGoods=(id)=>{
        // store.dispatch({type:'del',data:{id}})
        // store.dispatch(goodsDelAction({id}))
        this.props.goodsDelAction({id})
        this.setState({
            goodsList:store.getState().goods
        })
    }
    render() {
       
        return (
            <div>
                名称：<input type="text" value={this.state.values.name} onChange={(event)=>this.changeName(event)}/>
                单价：<input type="text" value={this.state.values.price} onChange={(event)=>this.changePrice(event)}/>
                <button onClick={this.submit}>{this.state.hasId?'编辑':'新增'}</button>
              
                {this.state.goodsList.map(item=>
                    <h2 key={item.id}>
                        <span>id:{item.id}</span>
                        <span>商品名:{item.name}</span>
                        <span>单价:{item.price}</span>
                        <button onClick={()=>this.edit(item)}>编辑</button>
                        <button onClick={()=>this.deletGoods(item.id)}>删除</button>
                    </h2>
                    )}
            </div>
        )
    }
}
const mapStateToProps = state=>{
    return {
        goods: state.goods
    }
}
const mapActionsToProps = dispatch=> ({
    goodsAddAction:goods=>dispatch(goodsAddAction(goods)),
    goodsDelAction:goods=>dispatch(goodsDelAction(goods)),
    goodsEditAction:goods=>dispatch(goodsEditAction(goods))
})
export default  connect(mapStateToProps,mapActionsToProps)(Layout)

1.数据条件过滤

redux是react组件的状态管理模式，负责管理组件中的所有数据，在数据处理过程中也包含根据条件进行数据过滤的行为，如过滤商品中价格超过200商品
1.selectore
自定义数据过滤函数，创建 store/modules/goods/goodsSelector.js

export function goodsByPriceSelector(goodsList,price) {
	return goodsList.filter(goods=>goods.price>price)
}

编辑主页，添加条件过滤函数，完成数据过滤

import {goodsSelector} from './goodsSelector'
...
state=this.props.goods
state=this.props.goodsCondition
...
const mapStateToProps = state => {
	return {
		goods:state.goods,
		goods:goodsByPriceSelector(state.goods,200)
	}
}

存在的问题，自定义数据条件过滤函数，存在同样的数据在多次访问时重复执行的问题，可以进行性能优化操作

2.reselect
描述：服务于redux数据条件过滤的一个第三方模块
作用:主要用于定义数据条件过滤操作

yarn add reselect

编辑文件 store/modules/goods/goodsSelector.js

import {createSelector} from 'reselect'
export const goodsByPriceSelector= createSelector(function(goodsList){
//第一个参数：是一个函数，用于将传如的数进行预处理
//让数据符合后续的运算条件，如果可以进行格式转化，结构重新设计
	return goodsList
},function(dataSource){
//第二个参数，是一个函数，主要用于数据的条件过滤
//参数数据：是第一个函数的返回值
return dataSouce.filter(goods=>goods.price>5000)
})

通过运行结果发现，如果条件过滤数据没有发生变化，reselect中就会直接使用上次缓存的数据结果，而不会再次执行内部的算法进行数据过滤，优化了系统执行性能

数据中如果需要进行数据过滤操作时，就需要考虑这里的数据过滤情况
如果每次数据的过滤条件都基本不一致，可以使用自定义过滤函数，避免了其他模块的引入，降低了编码复杂度的同时优化了模块/数据的加载
如果数据的多次过滤的条件经常出现一致的情况，可以使用第三方模块reselect完成数据过滤，优化数据过滤算法重复执行的问题

2.Action语法优化

1.Action语法优化
通过redux管理组件状态模式之后，所有的数据都被管理起来了，通过ActionCreator完成React组件和状态数据之间的操作关系，封装的actionCreators.js中定义了各种可能的数据操作方式

import {
    goodsAddType,goodsEditType,goodsDelType
} from './actionTypes'
export const goodsAddAction = data=>({type:goodsAddType,data})
export const goodsEditAction = data=>({type:goodsEditType,data})
export const goodsDelAction = data=>({type:goodsDelType,data})

需要在React页面组件中引入使用

import {
	goodsAddAction,
	goodsEditActions,
	goodsDelActions
} from './goodsActionsCreator'

存在的语法问题：每增加一种数据的操作方式，就需要做如下两个操作步骤

actionCreators.js中，定义一个新的数据操作方式
React组件Goods.jsx中，通过import再引入新定义的操作方式
React认为上述的操作方式，降低了开发效率，提供了goodsActionCreators用于优化引入操作方式的代码
编辑： Goods.jsx

import * as actions from '../store/moules/goodsActionCreator'
import {bindActionCreators} from 'redux'
const mapActionToprops = dispatch=> bindActionCreators(action,dispatch)

2.Action扩展案例
新增数据初始化Action，编辑 src/store/modules/goodsTypes.js

export const goodsInitType = 'goods/init' //新增一个初始化操作类型

编辑src/store/modules/goodsActionCreators.js

import {
	...
	brandInitType
} from './goodsTypes'
export const goodsInitAction = data=>({type:goodsInitType,data})

编辑src/store/modules/goodsReducer.js

import {
	...
	goodsInitType
} from './goodsActionTypes'
function goodsReducer(state=initData,action) {
	switch(action.type) {
		case goodsInitType:
			return action.data
	}
}

编辑 Goods.jsx,初始化redux管理的数据

UNSAFE_componentWillMount() {
	let axiosData=[
		{id:1,name:'小米',price: 2999},
		{id:2,name:'OPPO',price: 1999}
	]
}

3.redux-devtools

1.redux-devtools
作用：用于配合react应用，完成redux管理的状态的监控
类型：浏览器插件
2.redux-devtools-extension

yarn add redux-devtools-extension

编辑数管理模块：store/index.js 添加调试模块的支持

import {composeWithDevTools} from 'redux-devtools-extension'
const store = createStore

4.异步数据加载

1、React组件中初始化数据
初始化数据由React组件获取
编辑Goods.jsx

UNSAFE_componentWillMount() {
	axios.get('url').then(response=>{
		if(response.data.code === 200) {
			this.props.brandInitAction(response.data.list)
		}
	})
}

存在的问题：数据管理的职责划分不清楚，导致后期数据部分的维护难以升级

2.Redux管理数据
项目应用中，每个组件的职责划分清除，便于后期项目的维护

React组件：页面视图的渲染，数据更新的请求的发出
Redux组件：数据管理，如初始化、读取、新增、编辑、删除等
编辑goodsActionCreators.js

import axios from 'axios'
import {
	goodsAddType,
	goodsEditType,
	goodsDelType,
	goodsInitType
} from './goodsActionTypes'
export const goodsAddAction = data=> ({type:goodsAddType,data})
export const goodsEditAction = data=> ({type:goodsEditType,data})
export const goodsDelAction = data=> ({type:goodsDelType,data})
return dispatch=> {
	axios.get("url").then(response=>{
		if(response.data.code === 200) {
			dispatch(goodsInitAction(response.data.list))
		}
	})
}

编辑组件Goods.jsx

UNSAFE_componentWillMount(){
	this.props.goodsAxiosDataAction() //组件加载时，通知redux需要更新数据
}

注意:如果在actionCreators中添加了自定义函数，发现出现了报错
项目中安装插件 redux-thunk

yarn add redux-thunk

编辑数据管理模块 src/store/index.js，添加中间件支持

import {applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
const store = createStore(combineReducers({
	goods:goodsReducer,
	order: orderReducer
}),composeWithDevTools(applyMiddleware(thunk)))