React学习笔记系列仅为个人学习React后的代码总结,用于巩固与记录些重点知识,详细视频资源请参考bilibili:尚硅谷2021版React技术全家桶全套完整版(零基础入门到精通/男神天禹老师亲授)
// 安装redux
npm install redux
// 安装支持异步Action的中间件redux-thunk
npm install redux-thunk
// 安装react-redux
npm install redux-thunk
redux是一个专门用于做状态管理的JS库(不是react插件库),它可以用在react, angular, vue等项目中, 但基本与react配合使用,作用是集中式管理react应用中多个组件共享的状态。
在src下新建redux文件夹,在redux下新建constant.js、count_action.js、count_reducer.js以及store.js,详细代码如下:
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
import {INCREMENT,DECREMENT} from './constant'
// 同步Action
export const Increment = data => ({type:INCREMENT,data})
export const Decrement = data => ({type:DECREMENT,data})
// 异步Action
export const IncrementAsync = (data,time) => {
return (dispatch) => {
setTimeout(()=>{
dispatch(Increment(data))
},time)
}
}
import {createStore,applyMiddleware} from 'redux'
import countReducer from './count_reducer'
import thunk from 'redux-thunk'
// 用于支持异步Action需要applyMiddleware和thunk
export default createStore(countReducer,applyMiddleware(thunk))
import {INCREMENT,DECREMENT} from './constant'
// 用于初始化
const initState = 0
export default function countReducer(preState = initState,action){
const {type,data} = action
switch (type) {
case INCREMENT:
return preState + data;
case DECREMENT:
return preState - data;
default:
return preState;
}
}
在src下新建component,在component下新建Count,然后在Count下新建index.js
import React, { Component } from 'react'
import store from '../../redux/store'
import {
Increment,
Decrement,
IncrementAsync
} from '../../redux/count_action'
export default class Count extends Component {
increment = () =>{
const {value} = this.selectNumber
store.dispatch(Increment(value*1))
}
decrement = () =>{
const {value} = this.selectNumber
store.dispatch(Decrement(value*1))
}
incrementIFOdd = () =>{
const {value} = this.selectNumber
if (store.getState() % 2 !== 0) {
store.dispatch(Increment(value*1))
}
}
incrementAsync = () =>{
const {value} = this.selectNumber
store.dispatch(IncrementAsync(value*1,500))
}
render() {
return (
<div>
<h1>当前求和为:{store.getState()}</h1>
<select ref={c => this.selectNumber = c}>
<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}>当前求和为奇数再加</button>
<button onClick = {this.incrementAsync}>异步加</button>
</div>
)
}
}
import React, { Component } from 'react'
import Count from './components/Count'
import store from './redux/store'
export default class App extends Component {
render() {
return (
<div>
<Count/>
</div>
)
}
}
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
ReactDOM.render(<App/>,document.getElementById('root'))
//用于当redux内的state更新时重新渲染界面的
store.subscribe(()=>{
ReactDOM.render(<App/>,document.getElementById('root'))
})
redux的代码无需改变,使用react-redux后无需再使用store.subscribe去监听redux的状态了,其中使用的connect将自动去监听,且无需为每个容器组件都提供store,可以使用react-redux提供的Provider去批量的给所有的容器组件传递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 store = {store}>
<App/>
</Provider>,
document.getElementById('root')
)
// store.subscribe(()=>{
// ReactDOM.render(,document.getElementById('root'))
// })
在src下新建container->Count->index.js
import CountUI from '../../components/Count'
import {connect} from 'react-redux'
import {
Increment,
Decrement,
IncrementAsync
} from '../../redux/count_action'
// mapStateToProps函数返回对象中的key就是作为传递给UI组件props的key,value就作为传递UI组件props的value----状态
// mapStateToProps函数是由redux帮我们调的并且已经执行getState(),除此之外还将其返回值传给mapStateToProps (state)
function mapStateToProps (state) {
return {count: state}
}
// mapDispatchToProps传递操作状态的函数
function mapDispatchToProps (dispatch) {
return {
increment: (number) => {
dispatch(Increment(number))
},
decrement: (number) => {
dispatch(Decrement(number))
},
incrementAsync: (number,time) => {
dispatch(IncrementAsync(number,time))
}
}
}
// 容器组件与UI组件建立联系并暴露
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
import React, { Component } from 'react'
export default class Count extends Component {
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() {
return (
<div>
<h1>当前求和为:{this.props.count} </h1>
<select ref={c => this.selectNumber = c}>
<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}>当前求和为奇数再加</button>
<button onClick = {this.incrementAsync}>异步加</button>
</div>
)
}
}
import React, { Component } from 'react'
import Count from './containers/Count'
export default class App extends Component {
render() {
return (
<div>
<Count/>
</div>
)
}
}
原因是因为Increment等是一个含参数的函数,且react-redux将会实现自动分发(dispatch),总结mapDispatchToProps即可是一个函数,也可是个对象。
{
increment:Increment,
decrement:Decrement,
incrementAsync:IncrementAsync,
}
将component->Count->index.js整合到container->Count->index.js,原因是如果将组件分为容器与UI那么当组件个数多的时候将成倍增长导致项目文件过多。
import {connect} from 'react-redux'
import {
Increment,
Decrement,
IncrementAsync
} from '../../redux/count_action'
import React, { Component } from 'react'
class Count extends Component {
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() {
return (
<div>
<h1>当前求和为:{this.props.count} </h1>
<select ref={c => this.selectNumber = c}>
<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}>当前求和为奇数再加</button>
<button onClick = {this.incrementAsync}>异步加</button>
</div>
)
}
}
// mapStateToProps函数返回对象中的key就是作为传递给UI组件props的key,value就作为传递UI组件props的value----状态
// mapStateToProps函数是由redux帮我们调的并且已经执行getState(),除此之外还将其返回值传给mapStateToProps (state)
function mapStateToProps (state) {
return {count: state}
}
function mapDispatchToProps (dispatch) {
return {
increment: (number) => {
dispatch(Increment(number))
},
decrement: (number) => {
dispatch(Decrement(number))
},
incrementAsync: (number,time) => {
dispatch(IncrementAsync(number,time))
}
}
}
// 容器组件与UI组件建立联系并暴露
export default connect(mapStateToProps,mapDispatchToProps)(Count)