redux及react-redux的学习总结

redux及react-redux的学习总结

纯属学习记录，有错请指点

1、创建store.js文件

//引入createStore创建store,applMidleWare中间件使用支持异步的thunk中间件，combineReducers合并多个reducer
import {createStore， applMiddleWare, combineReducers} from "redux" 
//引入thunk支持异步action
import thunk form "redux-thunk"

//引入操作状态的各组件对应的reducer
import XXXReducer from "./reducers/XXXReducer" 
import zzzReducer from "./reducers/zzzReducer" 

//引入redux-devtools-extension,redux调试工具
import {composeWithDevTools} from 'redux-devtools-extension'

//合并reducer，后期可在reducers文件夹中创建index.js合并所有reducer后再在此处引入合并后的文件
const allReducer = combineReducers({
    a: XXXReducer,
    b: zzzReducer
})

export default createStore(allReducer, composeWithDevTools(applMiddleWare(thunk)))

2、创建reducer文件，该文件是用于创建一个为xxxx组件服务的reducer，reducer的本质就是一个函数reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)

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

3、创建action文件，该文件用于创建一个为xxxx组件服务的action

/* 
	该文件专门为xxx组件生成action对象
*/

//同步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) => {
	return (dispatch)=>{
		setTimeout(()=>{
			dispatch(increment(data))
		},1000)
	}
}

4、在组件中dispatch action

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

	//异步加
	incrementAsync = ()=>{
		const {value} = this.selectNumber
		this.props.incrementAsync(value*1,500)
	}

	render() {
		//console.log('UI组件接收到的props是',this.props);
		return (
			<div>
				<h2>我是Count组件,下方组件总人数为:{this.props.renshu}</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.a, //a在合并reducer时命名
		personCount:state.b
	}),
	//{increment,decrement,incrementAsync}
	//原始写法
	(dispatch) => {
	    return {
	        increment: (data) => { dispatch(increment(data)) }
	    }
	}
)(Count)

5、redux只负责维护状态，但不维护状态在页面的响应，改变状态要使页面发生变化需要在App组件中使用store.subscribe(()=>{})将ReactDom.reder(<App/>, document.getelementById(‘root’)包裹

store.subcribe(() => {
    ReactDom.reder(<App/>, document.getelementById('root'))
})

在使用react-redux的情况下，其已经帮我们维护了页面的更新，无需再有上面的操作

6、在使用react-redux连接容器组件与stor时，connect()()连接示例如下：

import {connect} from 'react-redux'
import Count from './component/count'

export defaule connect({
   /* 
	1.mapStateToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapStateToProps用于传递状态
   */
   function mapStateToProps(state){
       return {
           xxx: state.a
       }
   },
   
   /* 
	1.mapDispatchToProps函数返回的是一个对象；
	2.返回的对象中的key就作为传递给UI组件props的key,value就作为传递给UI组件props的value
	3.mapDispatchToProps用于传递操作状态的方法
    */
   function mapDispatchToProps(dispatch){
       return {
           increament: (data) => {dispatch(increament(data))}
       }
   }
})(Count )

上述容器组件连接ui组件与store，需要在改容器组件的父组件将store传入，而不是通过直接引入

import React, { Component } from 'react'
import Count from './containers/Count' //引入的Count的容器组件
import store from "./redux/store.js"

export default class App extends Component {
	render() {
		return (
			<div>
				<Count store={store}/>
			</div>
		)
	}
}

也可以通过在最外层index.js文件通过react-redux的Provider组件包裹App组件将store传给所有需要store的组件

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')
)