React之react-redux的使用与项目的打包

Posted Icy Hunter

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React之react-redux的使用与项目的打包相关的知识，希望对你有一定的参考价值。

文章目录

react-redux

react-readux是官方为我们提供帮助react更方便使用redex的。

下面将通过一个案例来展示react-redux的用法。

实例


实现这么一个界面，两组件之间能够通过redux信息交互

思路/注意事项

(1).明确两个概念：
			1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。
			2).容器组件：负责和redux通信，将结果交给UI组件。
(2).如何创建一个容器组件————靠react-redux 的 connect函数
				connect(mapStateToProps,mapDispatchToProps)(UI组件)
					-mapStateToProps:映射状态，返回值是一个对象
					-mapDispatchToProps:映射操作状态的方法，返回值是一个对象
(3).备注1：容器组件中的store是靠props传进去的，而不是在容器组件中直接引入
(4).备注2：mapDispatchToProps，也可以是一个对象
(5).容器组件和UI组件整合一个文件
(6).无需自己给容器组件传递store，给<App/>包裹一个<Provider store=store>即可。
(7).使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。
(8).mapDispatchToProps也可以简单的写成一个对象
(9).一个组件要和redux“打交道”要经过哪几步？
				(1).定义好UI组件---不暴露
				(2).引入connect生成一个容器组件，并暴露，写法如下：
						connect(
							state => (key:value), //映射状态
							key:xxxxxAction //映射操作状态的方法
						)(UI组件)
				(3).在UI组件中通过this.props.xxxxxxx读取和操作状态
(10).定义一个Pserson组件，和Count组件通过redux共享数据。
(11).为Person组件编写：reducer、action，配置constant常量。
(12).重点：Person的reducer和Count的Reducer要使用combineReducers进行合并，
		合并后的总状态是一个对象！！！
(13).交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。
(14).yarn add redux-devtools-extension
(15).store中进行配置
		import composeWithDevTools from 'redux-devtools-extension'
		const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
(16).所有变量名字要规范，尽量触发对象的简写形式。
(17).reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer

src文件目录

containers/Count/index.jsx:

Count的UI组件和容器组件

import React,  Component  from 'react'
//引入action
import 
	increment,
	decrement,
	incrementAsync
 from '../../redux/actions/count'
//引入connect用于连接UI组件与redux
import connect from 'react-redux'

//定义UI组件
class Count extends Component 

	state = carName:'奔驰c63'

	//加法
	increment = ()=>
		const value = this.selectNumber
		this.props.increment(value*1)
	
	//减法
	decrement = ()=>
		const value = this.selectNumber
		this.props.decrement(value*1)
	
	//奇数再加
	incrementIfOdd = ()=>
		const value = this.selectNumber
		if(this.props.count % 2 !== 0)
			this.props.increment(value*1)
		
	
	//异步加
	incrementAsync = ()=>
		const value = this.selectNumber
		this.props.incrementAsync(value*1,500)
	

	render() 
		//console.log('UI组件接收到的props是',this.props);
		return (
			<div>
				<h2>我是Count组件,下方组件总人数为:this.props.personCount</h2>
				<h4>当前求和为：this.props.count</h4>
				<select ref=c => this.selectNumber = c>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>&nbsp;
				<button onClick=this.increment>+</button>&nbsp;
				<button onClick=this.decrement>-</button>&nbsp;
				<button onClick=this.incrementIfOdd>当前求和为奇数再加</button>&nbsp;
				<button onClick=this.incrementAsync>异步加</button>&nbsp;
			</div>
		)
	


//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => (
		count:state.count,
		personCount:state.persons.length
	),
	increment,decrement,incrementAsync
)(Count)

containers/Person/index.jsx:

Person组件的UI组件和容器组件

import React,  Component  from 'react'
import nanoid from 'nanoid'
import connect from 'react-redux'
import addPerson from '../../redux/actions/person'

class Person extends Component 

	addPerson = ()=>
		const name = this.nameNode.value
		const age = this.ageNode.value*1
		const personObj = id:nanoid(),name,age
		this.props.addPerson(personObj)
		this.nameNode.value = ''
		this.ageNode.value = ''
	

	render() 
		return (
			<div>
				<h2>我是Person组件,上方组件求和为this.props.count</h2>
				<input ref=c=>this.nameNode = c type="text" placeholder="输入名字"/>
				<input ref=c=>this.ageNode = c type="text" placeholder="输入年龄"/>
				<button onClick=this.addPerson>添加</button>
				<ul>
					
						this.props.persons.map((p)=>
							return <li key=p.id>p.name--p.age</li>
						)
					
				</ul>
			</div>
		)
	


export default connect(
	state => (
		persons:state.persons,
		count:state.count
	),//映射状态
	addPerson//映射操作状态的方法
)(Person)

redux/actions/count.js:

count组件生成action的函数

/* 
	该文件专门为Count组件生成action对象
*/
import INCREMENT,DECREMENT from '../constant'

//同步action，就是指action的值为Object类型的一般对象
export const increment = data => (type:INCREMENT,data)
export const decrement = data => (type:DECREMENT,data)

//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const incrementAsync = (data,time) => 
	return (dispatch)=>
		setTimeout(()=>
			dispatch(increment(data))
		,time)

redux/actions/person.js:

person组件生成action的函数

import ADD_PERSON from '../constant'

//创建增加一个人的action动作对象
export const addPerson = personObj => (type:ADD_PERSON,data:personObj)

redux/reducers/count.js:

conut的“执行者”

/* 
	1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
	2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import INCREMENT,DECREMENT from '../constant'

const initState = 0 //初始化状态
export default function countReducer(preState=initState,action)
	// console.log('countReducer@#@#@#');
	//从action对象中获取：type、data
	const type,data = action
	//根据type决定如何加工数据
	switch (type) 
		case INCREMENT: //如果是加
			return preState + data
		case DECREMENT: //若果是减
			return preState - data
		default:
			return preState

redux/reducers/person.js:

person的“执行者”

import ADD_PERSON from '../constant'

//初始化人的列表
const initState = [id:'001',name:'tom',age:18]

export default function personReducer(preState=initState,action)
	// console.log('personReducer@#@#@#');
	const type,data = action
	switch (type) 
		case ADD_PERSON: //若是添加一个人
			//preState.unshift(data) //此处不可以这样写，这样会导致preState被改写了，personReducer就不是纯函数了。
			return [data,...preState]
		default:
			return preState

redux/reducers/index.js:

整合成一个reducer，方便调用和状态共享

/* 
	该文件用于汇总所有的reducer为一个总的reducer
*/
//引入combineReducers，用于汇总多个reducer
import combineReducers from 'redux'
//引入为Count组件服务的reducer
import count from './count'
//引入为Person组件服务的reducer
import persons from './person'

//汇总所有的reducer变为一个总的reducer
export default  combineReducers(
	count,
	persons
)

redux/constant.js:

用于定义常量

/* 
	该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
export const ADD_PERSON = 'add_person'

redux/store.js:

store（核心枢纽）

/* 
	该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

//引入createStore，专门用于创建redux中最为核心的store对象
import createStore,applyMiddleware from 'redux'
//引入汇总之后的reducer
import reducer from './reducers'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
//引入redux-devtools-extension
import composeWithDevTools from 'redux-devtools-extension'

//暴露store 
export default createStore(reducer,composeWithDevTools(applyMiddleware(thunk)))

App.jsx:

App组件

import React,  Component  from 'react'
import Count from './containers/Count' //引入的Count的容器组件
import Person from './containers/Person' //引入的Person的容器组件

export default class App extends Component 
	render() 
		return (
			<div>
				<Count/>
				<hr/>
				<Person/>
			</div>
		)

index.jsx:

入口文件

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包裹App，目的是让App所有的后代容器组件都能接收到store */
	<Provider store=store>
		<App/>
	</Provider>,
	document.getElementById('root')
)

运行

npm start

项目打包

npm run build

即可完成打包
速度取决于项目的复杂程度

这是实例打包后的文件。
运行需要开个服务器
可以安装一个方便的包

npm i serve -g

安装好之后，运行很方便
进入打包好的文件夹

cd build

然后直接打开服务器即可

serve

表示在这个文件夹开个服务器



能够正常打开网页。

以上是关于React之react-redux的使用与项目的打包的主要内容，如果未能解决你的问题，请参考以下文章

React入门之Redux：react-redux基本使用

React入门之Redux：react-redux基本使用

React之React-redux数据流转流程

React 15 与 React-redux 不兼容

React-Native 之 redux 与 react-redux

React-Native 之 redux 与 react-redux