Redux中文文档https://www.redux.org.cn/ React-redux中文文档https://www.redux.org.cn/docs/react-redux/ Redux 是 JavaScript 状态容器，提供可预测化的状态管理，如果通俗地一点来讲，那么Redux可以看做是一个数据仓库。 Redux与React-redux不是同一个库，Redux可以用在客户端、服务器、原生应用，而React-redux是React官方提供的只作用于React的绑定库。
Redux
Redux三大原则
- 单一数据源：整个应用的
state被存储在一棵object tree中，并且这个object tree只存在于一个store中，即使数据很多也没关系，可以根据需要自定义的拆分数据。 State是只读的：唯一改变state的方法就是触发action- 使用纯函数来执行修改：为了改变
state，action描述事务“发生了什么”，而真正的数据操作交给reducer
基础
Action
Action是把数据从应用传到store的有效载荷，它是store数据的唯一来源，一般来说会通过store.dispatch()将action传到store，简洁的概括就是action描述了事务"发生了什么"，而真正更新state的是Reducer
Reducer
Reducer指定了应用状态的变化如何响应actions并发送到store的，记住actions只是描述了事务"发生了什么"，并没有描述应用是如何更新state，此外Reducer是一个纯函数，接收旧的state并返回新的state，简洁地概括就是根据actions更新state
Store
Store是将Action与Reducer联系到一起的对象，Store有以下职责：
1、维持应用的state
2、提供getState()方法获取state
3、提供dispatch(action)方法更新state
4、通过subscribe(listener)注册监听器
5、通过subscribe(listener)返回的函数注销监听器
示例
reducer.js
//定义状态
const initState = {
count: 100
}
const reducer = (state = initState, action) => {
switch (action.type) {
case 'increment':
return Object.assign({},state,{
count:state.count + 1
})
case 'decrement':
return Object.assign({},state,{
count:state.count - 1
})
default:
return state
}
}
export default reducer
定义了三个事件，增加count、减少count和返回state
action.js
return {
type:'increment'
}
}
export const handleDecrement=()=>{
return {
type:'decrement'
}
}
定义了两种事务
store.js
import {createStore} from "redux";
import reducer from "./reducer";
const store = createStore(reducer)
export default store
action、reducer和store都已定义,在react中使用
import React,{Component} from 'react'
import {
handleIncrement,
handleDecrement
} from '../redux/action' //解构action定义的两种事务
import store from '../redux/store'
export default class Redux1Comp extends Component {
handleAdd=()=>{
const action = handleIncrement()//发布
store.dispatch(action)//更新
}
handleReduce=()=>{
const action = handleDecrement()
store.dispatch(action)
}
componentDidMount() {
store.subscribe(()=>{
this.setState({})
})
}
render() {
const {count} = store.getState()
//store.getState()获取数据
return (
<>
<h1>redux</h1>
<h2>count:{count}</h2>
<button onClick={this.handleAdd}>+1</button>
<button onClick={this.handleReduce}>-1</button>
</>
)
}
}
以上是一个使用redux简单的小例子实现，react-redux与redux一脉相承，只不过react-redux的使用更为简单
React-redux
依然使用上面的这个例子的action.js、reducer.js和store.js
import React, {Component} from 'react';
//+16增幅组件
import {connect} from 'react-redux';
import {
handleIncrement,
handleDecrement,
handleAsyncUpdataState
} from "../redux2/action2";
class ComA extends Component {
handleAdd=()=>{
console.log(this.props)
const {add} = this.props
add()
}
handleReduce=()=>{
console.log(this.props)
const {reduce} = this.props
reduce()
}
handleAddAsync=()=>{
console.log(this.props)
const {addAsync} = this.props
addAsync()
}
render() {
return (
<div className={'comA'}>
<button onClick={this.handleAdd}>+1</button>
<button onClick={this.handleReduce}>-1</button>
<button onClick={this.handleAddAsync}>async +1</button>
</div>
);
}
}
const mapDispatchToProps = (dispatch)=>{
return {
add(){
const action = handleIncrement()
console.log(action)
dispatch(action)
},
reduce(){
const action = handleDecrement()
dispatch(action)
},
addAsync(){
const action = handleAsyncUpdataState()
console.log(action)
dispatch(action)
}
}
}
//connect 第一个参数：允许我们将store中的数据 作为props绑定到组件
// 第二个参数：将action作为props绑定到我们自己的函数中
export default connect(null,mapDispatchToProps)(ComA);
在组件中获取状态
import React, {Component} from 'react';
import {connect} from 'react-redux'
class ComB extends Component {
render() {
const {count} = this.props
return (
<div className={'comB'}>
<h2>count:{count}</h2>
</div>
);
}
}
//connect 第一个参数：允许我们将store中的数据 作为props绑定到组件
// 第二个参数：将action作为props绑定到我们自己的函数中
const mapStateToProps=(state)=>{
return state
}
export default connect(mapStateToProps)(ComB);
与redux比较，React-redux更为简洁，只要在mapStateToProps中绑定的state或者action就直接可以在组件的props中获取到，这样state与action在mapStateToProps统一管理，使用起来很方便。更重要的是，React-redux自己会监听state的变化进行更新，而redux需要手动的在生命周期componentDidMount进行订阅事件来更新state。
网友评论