redux 使用react-redux插件

用来降低redux的耦合度和使得代码更简洁

1、安装
	cnpm install --save react-redux
	
2、index.js中改变监听订阅
	import {BrowserRouter} from 'react-router-dom'
	
	ReactDOM.render(
	  <Provider store={store} >
	      <App /> 
	  </Provider>
	,
	  document.getElementById('root')
	);

3、调用方法
	(1)组件在导出组件时
		import {connect} from 'react-redux'
		
		export default connect(
		  state=>({ 接收redux的初始数据状态的变量名:state }),
		  {actions.js内创建action对象的函数名,actions.js内创建action对象的函数名,..},
		  {props},	传递给props的额外内容,可选
		  {	  配置项,可选
			  context?: Object,
			  pure?: boolean,
			  areStatesEqual?: Function,
			  areOwnPropsEqual?: Function,
			  areStatePropsEqual?: Function,
			  areMergedPropsEqual?: Function,
			  forwardRef?: boolean,
		 }
		)(App); 
		
		
		其中:
			这些变量名和函数名会被...解构,作为参数,在组件的标签上传递
			实际上是这两个方法的映射
			const mapStateToProps=(state,ownProps)=>{
				ownProps代表组件本身的props,如果你的组件需要来自它自己的props的数据来做逻辑处理等
			    return{
					状态键值对
			    }
			}
			const mapDispatchToProps=(dispatch,ownProps)=>{
			传入ownProps, 当组件获取新的props的时候，mapDispatchToProps也会被调用.
		    return {
					方法1(){dispatch({type:'x',...})},
					方法2(){dispatch({type:'x',...})},..
			    }
			}
			
		其中:使用bindActionCreators简化mapDispatchToProps操作；
		
			import {bindActionCreators} from 'redux'
			
			const mapDispatchToProps=(dispatch)=>{
			    return {
						xxx:bindActionCreators(xx,dispatch)   xx为引入的action集合，import * as xx from '../store/actions'
				    }
				}
			调用:this.props.xxx.action名称()

			
	(2)组件接收参数
		import {函数名,...} from './redux/actions'
		import PropTypes from 'prop-types'
		
		  static propTypes={
		    接收redux的初始数据状态的变量名:PropTypes.xx.isRequired,
		    创建action对象的函数名:PropTypes.func.isRequired,
		    创建action对象的函数名:PropTypes.func.isRequired
		  }
		 
		获取状态:this.props.接收redux的初始数据状态的变量名;
		改变状态:this.props.创建action对象的函数名(参数);

组件中如果不使用connect高阶函数

	import {useDispatch,useSelector} from 'react-redux'
	
	发送action:
		  const dispatch=useDispatch();
		  dispatch({type:xx,xxx})
	获取状态:
		  const 状态=useSelector((state)=>state.仓库名);

代码示例:
index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter} from 'react-router-dom'


import store from './redux/store'
import {Provider} from 'react-redux'

ReactDOM.render(
  <Provider store={store} >
      <App /> 
  </Provider>
,
  document.getElementById('root')
);

// //订阅监听实现状态改变,渲染页面
// store.subscribe(function(){
//   ReactDOM.render(
//     <BrowserRouter>
//         <App store={store} /> 
//     </BrowserRouter>
//   ,
//     document.getElementById('root')
//   );
// })



// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js:

import React from 'react';
import './App.css';
import {increment,decrement}  from './redux/actions'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'

class App extends React.Component{

  static propTypes={
    count:PropTypes.number.isRequired,
    increment:PropTypes.func.isRequired,
    decrement:PropTypes.func.isRequired
  }


  increment = () => {
    const num = this.refs.numSelect.value*1
    // this.props.store.dispatch(actions.increment(num));
    this.props.increment(num);
  }

  decrement = () => {
    const num = this.refs.numSelect.value*1
   
    // this.props.store.dispatch(actions.decrement(num))
    this.props.decrement(num);
  }

  incrementIfOdd = () => {
    const num = this.refs.numSelect.value*1
    // const count=this.props.store.getState();
    const count=this.props.count

    if(count%2==1) {
      this.props.increment(num);
    }
  }

  incrementAsync = () => {
    setTimeout(() => {
      const num = this.refs.numSelect.value*1
      this.props.increment(num);
    }, 1000)
  }

  render () {
    // const count = this.props.store.getState()

    const count =this.props.count;

    return (
      <div>
        <p>
          click {count} times {' '}
        </p>
        <select ref="numSelect">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>{' '}
        <button onClick={this.increment}>+</button>{' '}
        <button onClick={this.decrement}>-</button>{' '}
        <button onClick={this.incrementIfOdd}>increment if odd</button>{' '}
        <button onClick={this.incrementAsync}>increment async</button>
      </div>
    )

  }

}

export default connect(
  state=>({ count:state }),
  {increment,decrement}
)(App); //connect()返回一个类,第一次参数为函数,第二个参数为对象,接收参数是App组件

//第一个参数根据redux中的状态,创建变量来接收,变量也会被解构放入App标签,当作组件参数传递
//第二个参数中的内容,会被...解构当作参数传递给组件App

actions.js:

/*
创建action的函数
*/

import { INCREMENT,DECREMENT } from "./action-type";

export const increment=(num)=>({type:INCREMENT,data:num})
export const decrement=(num)=>({type:DECREMENT,data:num})

reducers.js:

import {INCREMENT,DECREMENT} from './action-type'

export function counter(state=0,action)
{
    console.log('counter()',state,action);
    switch(action.type)
    {
        case INCREMENT:
        return state+action.data
        case DECREMENT:
        return state-action.data
        default: //初始状态
        return state
    }
}