redux 使用react-redux插件

﹏ヽ暗。殇╰゛Y 2021-07-24 19:54 531阅读 0赞

用来降低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}	不管是stateProps还是dispatchProps,都需要和ownProps merge之后才会被赋给组件,connect的第三个参数就是用来做这件事,通常情况下,你可以不传这个参数,connect就会使用Object.assign替代该方法。
    		)(App); 
    		
    		
    		其中:
    			这些变量名和函数名会被...解构,作为参数,在组件的标签上传递
    			实际上是这两个方法的映射
    			const mapStateToProps=(state,ownProps)=>{
    				ownProps代表组件本身的props，如果写了第二个参数ownProps，那么当prop发生变化的时候，mapStateToProps也会被调用。
    			    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
        }
    }