react-redux详细使用方法

其他 2019-07-10 23:29:29 阅读次数: 0

文件目录

    *---store   // 存放redux，数据，以及action
    
    *---store子目录
        actions  // 存放action的文件夹
        reducers // 存放reducer的文件夹
        actionTypes.js // 存放所有的actionType
        index.js // store的入口文件

安装

   npm install redux react-redux -S
   cnpm install redux react-redux -S
   yarn add redux react-redux -S

使用

  • 先在index.js中引入react-redux定义的Provider组件，并包裹在App组件外部
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import App from './App';
 
 ReactDOM.render(
 	<Provider>
 		<App />
 	</Provider>,
 	document.getElementById('root')
 );
  • 接着在store目录下的index.js中创建一个store,并抛出
 import { createStore, combineReducers } from 'redux';
  // createStore方法是用来创建store的，combineReducers方法是用来合并多个reducer的
  
  // 创建根reducer，利用combineReducers合并多个reducer，此处还未定义reducer，所以暂空
  const rootReducer = combineReducers({
  
  })
  
  // 创建初始化的state，初始化为一个空对象即可，默认的数据建议都写在reducer上
  const initializeState = {}; // 定义初始化的state
  
  // 创建store，第一个参数是根reducer，第二个参数可以是初始化的state，也可以是别的，暂且不提
  const store = createStore(rootReducer,initializeState);
  
  // 抛出store
  export default store;
  • 在src/index.js中引入store，并且在Provider组件上使用
  /**之前的代码**/
 import store from './store';
  
 ReactDOM.render(
	<Provider store={store}>
		<App />
	</Provider>,
  	document.getElementById('root')
    );
  • 接着可以先定义数据，即定义reducer，在src/store/reducers目录下，新建reducer,例如countReducer.js
  // 定义初始化的数据，根据实际数据即可
  const initializeState = {
      count: 1
  }
        
 // 定义reducer，第一个参数为state，赋予默认值为上边定义的initializeState，
// 第二个参数为action，并return一个state  
 // 并且抛出这个countReducer
 export default function countReducer(state = initializeState,action) {
      return state;
}
  • 在src/store/index.js中引入定义的countReducer，并合并到rootReducer中
 // 引入countReducer， 
 import countReducer from './reducers/countReducer';
       
 // 将countReducer合并到rootReducer上，并使用原有名称
   const rootReducer = combineReducers({
       countReducer
   })
       
 // 也可以给countReducer改名,如下，改名成为count
   const rootReducer = combineReducers({
         count: countReducer
})

  • 接着只需要将组件改造一下，就可以使用reducer上边的数据了

  • 在src/APP.js中，或者是你需要使用store中数据的组件中，引入react-redux提供的connect方法

   import { connect } from 'react-redux';

  • 并且在抛出之前，定义获取数据的方法mapStateToProps

    	// 定义方法mapStateToProps，参数为state，并且返回一个对象，对象内定义需要获取的store内的数据，
	// 由于是使用的countReducer中的数据，所以需要使用state.countReducer.属性名 
	function mapStateToProps(state) {
	     return {
	         count: state.countReducer.count
	     } 
	}

  • 接着，在抛出的时候调用connect方法改造当前组件

// connect的第一个参数为数据，即mapStateToProps方法
// 接着在第二个括号内传入当前需要被改造的组件  
export default connect(mapStateToProps)(App);
  • 然后，我们在被改造的组件内就可以通过this.props.属性名获取store中的数据了，例如我在mapStateToProps方法中返回的是count数据，所以我在App组件中使用this.props.count即可
       class App extends Component {
       	render() {
       		return (
       			<div>
       				{this.props.count}
       			</div>
       		);
       	}
       }

  • 获取到数据之后，接着应该是修改仓库内的数据

  • 修改数据首先需要定义一个dispatch，在redux中，修改数据必须通过dispatch提交一个action来进行，在src/store/actions目录下新建countAction.js

  • 在countAction.js中定义addCount方法，并return一个对象，对象上有一个type属性，这个属性对应的是一个常量字符串，这个字符串定义在src/store/actionTypes.js中，主要是为了可以公共的管理，因为同一个常量需要在两个地方使用

    // countAction.js
    
    import { ADD_COUNT } from '../actionTypes'
    
    export function addCount() {
    	return {
    		type: ADD_COUNT
    	}
    }
    
    // actionTypes.js
    
    export const ADD_COUNT = 'ADD_COUNT';
  • 接着在src/store/reducers/countReducer.js中，引入ADD_COUNT常量，并使用switch语句，或者if语句对action.type进行判断,当触发这个action的时候，让当前这个reducer的state.count加一
	    import { ADD_COUNT } from '../actionTypes';
	
	    export default function countReducer(state = initializeState,action) {
	    	switch (action.type) {
	    		case ADD_COUNT:
	    			return { count: state.count + 1 };
	    		default:
	    			return state;
	    	}
	    }

  • 紧接着，要在组件中使用这个addCount方法，提交这个dispatch，触发这个action

  • 在App.js或者是使用store的组件中，首先引入addCount方法，然后在mapStateToProps的下边，在定义一个mapActionToProps方法，接着在connect的第二个参数位置，传入这个方法即可

  • 在mapActionToProps方法中，第一个参数为dispatch，return一个对象，对象上定义方法
    方法名自定义即可，接着触发这个方法的时候，触发dispatch()，并传入引入的addCount()方法，需要加括号调用，因为只有调用才会返回一个对象，( 或者addCount直接是一个对象，而不是一个函数 )

       import { addCount } from './store/actions/countAction'
       
       /** 其余代码 **/
       
       /** mapStateToProps **/
       
       function mapActionToProps(dispatch) {
       	return {
       		addCount: () => dispatch(addCount())
       	}
       }
       
       export default connect(mapStateToProps,mapActionToProps)(App);

  • 此时，可以在App组件内调用this.props.addCount()方法来修改store中的数据了

  • 当然，但凡是方法，都可以传参，

  • 首先在src/store/actions/countAction.js中定义一个新的方法，

  • 当然，这个方法用到的REDUCE_COUNT常量要定义在src/store/actionTypes.js中

       // src/store/actions/countAction.js
       export function reduceCount(num) {
       	return {
       		type: REDUCE_COUNT,
       		num
       	}
       }
     
       // src/store/actionTypes.js
       export const REDUCE_COUNT = 'REDUCE_COUNT';
  • 而且，在src/store/reducers/countReducer.js中，需要通过switch进行判断action，并执行操作
  • 由于我们在action中定义的对象的属性是num，所以在reducer中进行参数使用的时候，也是使用action.num
  // src/store/reducers/countReducer.js
  import { ADD_COUNT, REDUCE_COUNT } from '../actionTypes'
  
  export default function countReducer(state = initializeState,action) {
  	switch (action.type) {
  		case ADD_COUNT:
  			return { count: state.count + 1 };
  		// 新增	
  		case REDUCE_COUNT:
  			return { count: state.count - action.num };
  		default:
  			return state;
  	}
  }
  • 在App.js中使用reduceCount方法
 import { addCount, reduceCount } from './store/actions/countAction';

 /** 其余代码 **/
 
 /** mapStateToProps **/
 
 function mapActionToProps(dispatch) {
 	return {
 		addCount: () => dispatch(addCount()),
 		reduceCount: (num) => dispatch(reduceCount(num))
 	}
 }

  • 接着在组件中直接调用this.props.reduceCount()方法，并传入一个参数即可

  • 最后，为了遵循react的规范，我们需要在给组件定义props的时候，规定props的类型

  • 首先在App.js或者使用store的组件中，引入prop-types

  • 然后在文件最末尾，抛出之前，定义所有的props的类型

       import PropTypes from 'prop-types';
       
       /** 其余代码 **/
       
       App.propTypes = {
       	count: PropTypes.number.isRequired,
       	addCount: PropTypes.func.isRequired,
       	reduceCount: PropTypes.func.isRequired
       }

最终代码

index.js

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

App.js

    import React, {Component} from 'react';
    import { connect } from 'react-redux';
    import { addCount, reduceCount } from './store/actions/countAction';
    import PropTypes from 'prop-types';
    
    class App extends Component {
    	render() {
    		return (
    			<div>
    				<button onClick={()=>this.props.addCount()}>加1</button>
    				{this.props.count}
    				<button onClick={()=>this.props.reduceCount(5)}>减5</button>
    			</div>
    		);
    	}
    }
    
    function mapStateToProps(state) {
    	return {
    		count: state.countReducer.count
    	}
    }
    
    function mapActionToProps(dispatch) {
    	return {
    		addCount: () => dispatch(addCount()),
    		reduceCount: (num) => dispatch(reduceCount(num))
    	}
    }
    
    App.propTypes = {
    	count: PropTypes.number.isRequired,
    	addCount: PropTypes.func.isRequired,
    	reduceCount: PropTypes.func.isRequired
    }
    
    export default connect(mapStateToProps,mapActionToProps)(App);

store/index.js

    import { createStore, combineReducers } from 'redux';
    import countReducer from './reducers/countReducer';
    
    const rootReducer = combineReducers({
    	countReducer
    })
    
    const initializeState = {}; // 定义初始化的state
    
    const store = createStore(rootReducer,initializeState);
    
    export default store;

store/actionTypes.js

    export const ADD_COUNT = 'ADD_COUNT';
    export const REDUCE_COUNT = 'REDUCE_COUNT';

store/reducers/countReducer.js

    import { ADD_COUNT, REDUCE_COUNT } from '../actionTypes'
    
    const initializeState = {
    	count: 1
    }
    
    export default function countReducer(state = initializeState,action) {
    	switch (action.type) {
    		case ADD_COUNT:
    			return { count: state.count + 1 };
    		case REDUCE_COUNT:
    			return { count: state.count - action.num };
    		default:
    			return state;
    	}
    }

store/actions/countAction.js

    import { ADD_COUNT, REDUCE_COUNT } from '../actionTypes'
    
    export function addCount() {
    	return {
    		type: ADD_COUNT
    	}
    }
    
    export function reduceCount(num) {
    	return {
    		type: REDUCE_COUNT,
    		num
    	}
    }

- 如果需要使用中间件的话

  • 在store/index.js中，引入applyMiddleware，并使用在createStore的第三个参数位置
  • 接着引入需要使用的中间件，比如redux-thunk
  • 定义一个数组，用来存放所有的中间件
  • 在applyMiddleware方法中展开该数组即可
   import { createStore, combineReducers, applyMiddleware } from 'redux';
   // 引入redux-thunk
   import thunk from 'redux-thunk';

   // 定义中间件的数组
   const middleware = [ thunk ]

   // 使用
   const store = createStore(rootReducer,initializeState,applyMiddleware(...middleware));

猜你喜欢

转载自blog.csdn.net/qq_44492790/article/details/91041210
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022