React中Redux的使用和封装

React中的Redux的使用

Redux他不仅能为react这样的框架提供，他也能在许多框架中大显伸手，此次呢我们就来了解一下Redux在react中是如何服务的

我们要知道，我们使用Redux，就是想要一个全局的store，能够控制整个程序，程序中个个组件都能获取和修改，也就是全局的仓库，类似于Vue的VueX，了解了这些我们就可以开始部署我们的react的store了
首先：
我们需要安装两个包，一个是redux,一个是react-redux,后者就是联系react和redux的中间件

npm install redux react-redux -s

开始创建store
在react工程的src文件夹下创建一个store的文件夹，并创建index.js文件
这个文件就是我们创建和生成store的地方
基于react的工作原理，他每次输出store时都是输出一个新的store对象，因此我们需要在这个文件夹下引入一个reducers文件，这个文件的功能就是保证创建的store有原先的内容和修改后的内容，不至于每次都被初始化掉了

现在我们先编写index文件：

//创建Store
import {createStore} from 'redux'
/* 
Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。
*/
import reducers from './reducers'


export default  createStore(reducers)

这个createStore 就是产生一个store对象，并置换掉原有的store，接受一个参数，这个参数就是你所要生成的对象，为何这么说呢，因为reducers.js返回的就是一个store对象

那我们来看看reducers.js文件配置吧
reducers.js文件就是生产一个对象，而createStore就是包装该对象使他成为store对象，在每次调用store时都会调用reducers.js，从而获取和更新store对象
我们的store对象，不是凭空产生（事实上你可以），需要根据你当前的工程，来先编写几个默认的键值对因此你需要引入一个默认的store对象，也就是单纯一个对象，并没有很多强大的功能

不说那么多，先上代码：
reducers.js

import defult_state from './defult_state'

const reducers= (state = defult_state,action)=>{
  if(action.type === 'chang'){
    return {...state,...action.data}
  }
  return state
}

export default reducers

可以看到有两个参数，一个是state，一个是action。
当createStore调用reducers时，会将前一个store和一个修改行为塞给他，我们知道第一次调用的时候根本就没有store，因此会为空，此时我们就会给他一个默认值，state，也就是默认的store，防止走空，在第二次以后调用时，则会使用前一个store
action指的是你修改的行为，按按照规范，一个修改行为应该具备type（类型）和修改数据，这样我们就能在函数中根据修改的类型去去对传过来的state对象进行修改。
最后将一个加工好的对象返回，要注意，必须要返回一个对象，不能为空
默认store配置

const state = {
  title: '首页',
  show: true,
  qr_code:[{id: 1, img_url: "https://www.‘’‘’.jpeg"},
  ],
  adressdata: ["地址：2号楼", "电话：137340446", "邮箱：15110@qq.com", "交通：地铁2城西"]
}

export default state

这样我们的store就配置好了

那么我们就要开始使用了

使用的最直接的想法就是，我直接调用在使用组件的地方导入store就试了，但是那其实并不香，使用起来不是很顺利，

这时候react-redux就起作用了，这里面有两个方法我们需要用到
Provider和connect，前者负责将store往下传递，这样我们将Provider放在项目的源头，所有的组件就都访问到了，是不是很香

所以我们在整个项目的index.js文件夹中加入以下代码

代码：

import store from './store/index'
import {Provider} from 'react-redux'
ReactDOM.render(
    <Provider store={store} >
      <App />
    </Provider>,
  document.getElementById('root')
);

传递下去了，我们就要在用到store的这个地方去接住这个store，而connect就是干这活的，
connect其实是个函数，他接受四个参数：
mapStateToProps, mapDispatchToProps, mergeProps和options。
前面两个就是我们需要经常用到的获取和修改
而后面两个则是不怎么用到的，想要多多了解的朋友们可以自己百度一下
mapStateToProps：有两个参数（state，ownProps），state也就是connect所接收的store，后者就是当前组件的props，该参数负责对接收到的store进行自定义修改并且输出，也就是说，有时候你并不想要全部的store信息，只需要一部分，你就可以对只输出你所需要的那一部分就行

const mapStateToProps = (state,ownProps)=>{return {...state}}

mapDispatchToProps：也有两个参数（dispatch,ownProps）
dispatch，就是store的修改store的方法，这里直接将connect所接收到的store里面的dispatch方法作为参数传递了进来，而mapDispatchToProps也会返回一个对象，这时我们可以把这个方法作为键值里面的回调函数给返回出去，从而可以供我们在合适的地方只要调用这个键就能调用这个方法

(dispatch会将传入的参数作为store的action传入reduces，从而达到修改store的目的)

const mapDispatchToProps = dispatch => {
  return {
    onClickofStore: title => {
      dispatch(title)
    }
  }
}

好了，我们现在连个参数配置好了，那么问题来了，我们如何访问到这两个方法的返回值呢，connect很聪明，他将这两个返回值会直接塞进该组件的props属性中，键就是属性名，键值就是属性值，所以我们只要调用connect这个方法并随着该组件导出就行，

connect(mapStateToProps,mapDispatchToProps)(Home)  
//Home为组件名

（其实这里我们可以看出connect其实是一个高阶组件，哈哈）

总的：

import { connect } from 'react-redux'
import React, { Component } from 'react';
const mapStateToProps = (state,ownProps)=>{return {...state}}
const mapDispatchToProps = dispatch => {
  return {
    onClickofStore: title => {
      dispatch(title)
    }
  }
}
// {type:'chang',data:title}
class Home extends Component{
	render(){
	<button onclick={this.props.onClickofStore({type:"CHANGE",data:{name:"hah"}})}></button>
	}
}

connect(mapStateToProps,mapDispatchToProps)

我们会发现，好多组件都会用到store，并且修改store，每次写那么多的话，就会大大降低了我们写代码速度，影响了我们的神采，因此，我们可以小小封装一下：
创建一个文件夹

写入

代码：

import { connect } from 'react-redux'
const mapStateToProps = (state,ownProps)=>{return {...state}}
const mapDispatchToProps = dispatch => {
  return {
    onTodoClick: title => {
      dispatch(title)
    }
  }
}
// {type:'chang',data:title}
const Storeaction  = connect(mapStateToProps,mapDispatchToProps)

export default Storeaction;

这样我们使用时，只要导入这个文件，并在输出的时候将组件名写入一起导出就行

import Storeaction from ‘相对路径’
import React, { Component } from 'react';
class Home extends Component{
	render(){
	<button onclick={this.props.onClickofStore({type:"CHANGE",data:{name:"hah"}})}></button>
	}
}
export default Storeaction(Home);

就能正常使用到我们之前写的那些获取和修改的方法了
此次封装简单有效，可扩展性高，希望大家采纳哦

有不懂得地方，或者写错的地方希望的大家指出来，一起讨论！
感谢阅读