react-redux 基础

React Redux是Redux的官方React绑定。它允许React组件从Redux存储读取数据，并向存储分派操作以更新数据。
学习react-redux之前呢，我们要学完redux。没有学redux的小伙伴可以传送到redux
react-redux给人的感觉就是组件外包一层react-redux，该组件就可以使用store了。(⊙﹏⊙)

//reactReduc_count.js
//connect用于将React组件连接到Redux存储区，就包裹一层
import {connnect} from 'react-redux'
//需要被包裹的组件
import countUI from '../component/Count'
//引入actions
import {Add,Subtract} from '../redux/actions'
//返回初始值，默认参数state
function mapStateToProps(state){
    return {count:state}
}
//默认参数dispatch,这样就可以在this.porps.add中使用对应的action了
function mapDispatchToProps(dispatch){
    return{
        'add':(data)=>{dispatch(Add(data))}
        'subtract':(data)=>{dispatch(Subtract(data))}
    }
}
//这个mapDispatchToProps也可以简写成对象
const mapDispatchToProps = {
    'add':Add,
    'subtract':Subtract
}
//使用connect并导出,会生成一个新组件,但需要将store传入
export default connect(mapStateToProps,mapDispatchToProps)(countUI)

//countUI.js
import React,{component} from 'react'
export default class countUI extends Component{
    return(){
        <div>
            {/* 获取state */}
            <h1>this.porps.count</h1>
            <button onClick={this.add} ></button>
            <button onClick={this.subtract}></button>
        </div>
    }
    //加的方法
    add=()=>{
    //加1
        this.porps.add(1)
    }
    //减得方法
    subtract=()=>{
    //减1
        this.porps.subtract(1)
    }
}

//acitons.js
export function Add(data){
    return {type:'add',data}
}
export function Subtract(data){
    return {type:'subtract',data}
}

//store.js
//引入createStore，用于创建一个stroe
import {createStore} from 'redux'
//createStore需要传入一个reducer
import countReducer from './count_reducer'
//导出
export default createStore(countReducer)

reudx里有combineReducers()可以合并多个reducers

//store.js
//引入createStore，用于创建一个stroe
import {createStore,combineReducers} from 'redux'
//createStore需要传入一个reducer
import countReducer from './reducer/count'
//传入第二个组件
import peopleReducer from './reducer/people'

//整合reducer们
const allReducer = combineReducers({
    sum:countReducer,
    person:peopleReducer
})
//导出
export default createStore(allReducer)**

使用组件

//App.js
import React, { Component } from 'react'
import Count from './react_redux/reactReduc_count'
import store from './redux/store'
export default class App extends Component {
  render() {
    return (
      <div>
        <Count store={store}/>
      </div>
    )
  }
}

如果按照上面的方式引入store的话，那么每个要用的组件都要逐个传入，这样太麻烦了，所有可以使用以下方法

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import store from './redux/store';
import {Provider} from  'react-redux'
ReactDOM.render(
    <Provider store={stroe}>
      <App />
    </Provider>,
    document.getElementById('root')
);
//这样就不用再使用的时候逐个传入了

reactReduc_count.js与countUI.js可以写成一个文件

//connect用于创建容器父组件
import { connect } from 'react-redux'
import { Plus, Subtract } from '../redux/action/count'
import React, { Component } from 'react'
class Count extends Component {
    render() {
        return (
            <div>
                <h1>{this.props.count}</h1>
                <button onClick={this.add}>+</button>
                <button onClick={this.subtract}>-</button>
            </div>
        )
    }
    //加1
    add = () => {
        this.props[PLUS](this.state.selectN)
    }
    //减1
    subtract = () => {
        this.props[SUBTRACT](this.state.selectN)
    }
}

function mapStateToProps(state) {
    return {
        count: state.sum,
        peopleArr: state.man.length
    }
}
export default connect(mapStateToProps, {
    'add': Add,
    'subtract': Subtract
})(Count)