React基础学习心得体会（redux+react-redux）

第四章节：redux部分（redux+react-redux） 

（本文是学习尚硅谷前端react课程的学习笔记）

 

 

1.redux里面包括三大件action、store、reducer

2.action

（1）action需要返回一个对象，这个对象里面需要包含两个关键字type和data。

（2）同步action返回的是一个对象，异步方法返回的是一个函数.

（3）但是异步action返回的函数不会被认识，所以需要引入中间件redux-thunk

//同步action，就是指action的值为Object类型的一般对象
//type表示操作类型，data是数据
export const createIncrementAction = data => ({type:INCREMENT,data})

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

3.store

//引入createStore，用于把reducer封装成store
import {createStore,applyMiddleware} from 'redux'
//引入自己编写的countReducer 
import countReducer from './count_reducer'
//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
//暴露store
//applyMiddleware需要引入，并且将thunk作为参数传入，表示应用中间件
export default createStore(countReducer,applyMiddleware(thunk))

4.reducer

reducer从action中拿到type和data，对上一个状态结合type和data进行操作，最终返回一个新的状态。

/* 
	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(preState);
	//从action对象中获取：type、data
	const {type,data} = action
	//根据type决定如何加工数据
	switch (type) {
		case INCREMENT: //如果是加
			return preState + data
		case DECREMENT: //若果是减
			return preState - data
		default:
			return preState
	}
}

5.components

拿到状态：store.getState()拿到状态

发送通过store.dispatch(action)实现store和action的交互

increment = ()=>{
		const {value}=this.selectNumber
		store.dispatch(createIncrementAction(value*1))
	}

6.react-redux（redux是一套，容器和UI组件是一套）

第一，区分容器和UI组件

（1）UI组件：不能使用任何redux的api，不交互，只负责页面显示，通过props。

（2）容器组件：负责和redux通信，将结果交给UI组件，通过props。

第二，创建容器组件

靠react-redux 的 connect函数 connect(mapStateToProps,mapDispatchToProps)(UI组件) 

mapStateToProps:映射状态，返回值是一个对象 （可以简写）

mapDispatchToProps:映射操作状态的方法，返回值是一个对象 （可以简写）

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

第三，容器组件中的store是靠props传进去的，而不是在容器组件中直接引入 ，给<App/>包裹一个<Provider store={store}>，即可。

import {Provider} from 'react-redux'

ReactDOM.render(
	/* 此处需要用Provider包裹App，目的是让App所有的后代容器组件都能接收到store */
	<Provider store={store}>
		<App/>
	</Provider>,
	document.getElementById('root')
)

第四，在UI组件中通过this.props.xxxxxxx读取和操作状态

//加法
	increment = ()=>{
		const {value} = this.selectNumber
		this.props.increment(value*1)
	}

第五，如果出现多个组件，多个redurcer，则使用combineReducers把多个reducer结合在一起，整合成store，最后注意在组件中取出状态的时候，记得“取到位”。

//引入combineReducers，用于汇总多个reducer
import {combineReducers} from 'redux'
//引入为Count组件服务的reducer
import count from './count'
//引入为Person组件服务的reducer
import persons from './person'

//汇总所有的reducer变为一个总的reducer
export default  combineReducers({//combineReducer将两个ruducer合并成一个
	count,
	persons
})

第六，推荐一个开发者工具

yarn add redux-devtools-extension

store中进行配置

import {composeWithDevTools} from 'redux-devtools-extension'

const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))