redux 完整详解

拼搏现实的明天。 2021-07-24 20:33 347阅读 0赞

1、安装
    	cnpm install redux --save
    	
    2、创建action-type.js文件
    
    	用途:
    		用来放置action的type属性的常量
    	
    	export const XX='XX'
    	
    3、创建actions.js文件
    
    	用途:
    		用来创建action对象
    		action中存储type类型和数据,会根据type来进行何种操作,数据来进行状态更新
    	
    	(1)引入action-type.js
    		import { xx,xx,.. } from "./action-type";
    		
    	(2)通过函数返回action对象
    		export const xx=(数据参数)=>({type:XX,data:参数}); 
    			其中:除了type属性外其他可自定义
    			
    4、创建reducers.js文件
    	用途:
    		是数据的保存地方和返回数据的地方
    		其中的函数是用来操作状态的函数
    		会根据action对象,来进行对应的操作
    		state和action为必要参数
    		state的值会自动更新成返回值
    		state不能修改(即不能改动state,.splice()这样的方法不能使用)
    		数组添加:[...state,...]
    		数组删除:state.filter((item,index)=>{... return true})
    	
    	(1)引入action-type.js
    		import { xx,xx,.. } from "./action-type";
    		
    	(2)创建并暴露函数
    		export function xxx(state=0,action)
    		{
    		    switch(action.type)
    		    {
    		        case xx:
    		        return 操作
    		        case xx:
    		        return 操作
    		        default: //初始状态
    		        return state; 可在形参中设定初始值
    		    }
    		}
    		
    5、创建store.js文件
    	用途:
    		根据reducer来生成store仓库,是调用的入口
    		
    		(1)引入创建仓库方法
    			import {createStore} from 'redux';
    			
    		(2)引入reducer内的方法
    			import  {xx} from './reducers'
    		
    		(3)创建store并导出
    			const store=createStore(xx)
    			export default store;
    			
    6、注册仓库,并根据状态变化重新渲染应用(可使用react-redux简化)
    	(1)在index.js中引入store
    		import store from './redux/store'
    		
    	(2)将store注册进整个应用,即第一次初始化状态
    		ReactDOM.render(
    		      <App store={store} /> 
    		,
    		  document.getElementById('root')
    		);
    	
    	(3)数据改变,渲染应用,再第二步后面添加
    	
    		订阅监听实现状态改变,渲染页面
    		store.subscribe(function(){
    		  ReactDOM.render(
    		        <App store={store} /> 
    		  ,
    		    document.getElementById('root')
    		  );
    		})
    		
    7、调用方法管理数据(可使用react-redux简化)
    	(1)在页面中引入需要的action对象,可以使用{}来按需引入
    		import * as actions from './redux/actions'
    	
    	(2)调用reducer内的方法来改变状态
    		1、获取状态:this.props.store.getState();
    		2、改变状态:this.props.store.dispatch(actionsxx(传递参数))

![在这里插入图片描述][20200607144759913.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]  
代码示例:  
action-type.js:

export const INCREMENT='INCREMENT'
    export const DECREMENT='DECREMENT'

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
        }
    }

store.js:

import { createStore} from 'redux';
    import  { counter} from './reducers'
    
    
    const store=createStore(counter)
    console.log(store);
    
    export default store;

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'
    
    
    ReactDOM.render(
      <BrowserRouter>
          <App store={ store} /> 
      </BrowserRouter>
    ,
      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 * as actions from './redux/actions'
    
    class App extends React.Component{ 
    
      increment = () => { 
        const num = this.refs.numSelect.value*1
        this.props.store.dispatch(actions.increment(num));
      }
    
      decrement = () => { 
        const num = this.refs.numSelect.value*1
       
        this.props.store.dispatch(actions.decrement(num))
      }
    
      incrementIfOdd = () => { 
        const num = this.refs.numSelect.value*1
        const count=this.props.store.getState();
        if(count%2==1) { 
          this.props.store.dispatch(actions.increment(num))
        }
      }
    
      incrementAsync = () => { 
        setTimeout(() => { 
          const num = this.refs.numSelect.value*1
         
          this.props.store.dispatch(actions.increment(num))
        }, 1000)
      }
    
      render () { 
        const count = this.props.store.getState()
    
        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 App;

[20200607144759913.png]: https://img-blog.csdnimg.cn/20200607144759913.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200607145249323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200607145432299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]: /images/20210724/0cf7b993b6194d0c872260a7d431ec05.png