准备
没接触过react可以先看: react的简单介绍.
Redux介绍
解决React数据管理(状态管理),用于中大型,数据比较庞大,组件之间数据交互多的情况下使用。如果你不知道是否需要使用Redux,那么你就不需要用它!
- 解决组件的数据通信。
- 解决数据和交互较多的应用
Redux只是一种状态管理的解决方案!
Redux属性介绍
Store:数据仓库,保存数据的地方。
State:state是1个对象,数据仓库里的所有数据都放到1个state里。
Action:1个动作,触发数据改变的方法。
Dispatch:将动作触发成方法
Reducer:是1个函数,通过获取动作,改变数据,生成1个新state。从而改变页面
安装Redux
npm install redux --save
先看普通案例
简单的实现对一个数的加减
import React from 'react';
import ReactDOM, { render } from 'react-dom';
class App extends React.Component{
constructor(props){
super(props);
this.state={
num:0
}
}
add=()=>{
this.setState({
num:this.state.num+1
})
}
jj=()=>{
this.setState({
num:this.state.num-1
})
}
render(){
return(
<div>
<h1>数据:{this.state.num}</h1>
<button onClick={this.add}>+1</button>
<button onClick={this.jj}>-1</button>
</div>
)
}
}
ReactDOM.render(<App></App>,document.getElementById("root"))
利用Redux改写案例
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux'
//定义修改函数
const reducer = function(state={num:0},action){
//decrement()和add()函数调用并赋值action.type
let type= action.type;
switch(type){
case "add":
state.num++;
break;
case "decrement":
state.num--;
break;
}
return {...state}
}
//创建store
const store =createStore(reducer);
//加
function add(){
//content只是测试传入多个参数
store.dispatch({type:"add",content:{id:1,msg:"helloworld"}})
}
//减
function decrement(){
//content只是测试传入多个参数
store.dispatch({type:"decrement",content:{id:1,msg:"helloworld"}})
}
//页面渲染类
class ReduxApp extends React.Component{
render(){
let state=store.getState();
return(
<div>
<h2>数据:{state.num}</h2>
<button onClick={add}>加1</button>
<button onClick={decrement}>减1</button>
</div>
)
}
}
ReactDOM.render(
<ReduxApp />,
document.getElementById('root')
);
//监听数据变化,对页面进行重新渲染
store.subscribe(()=>{
ReactDOM.render(
<ReduxApp />,
document.getElementById('root')
);
})
react-redux介绍
和redux作用差不多
概念:
Provider组件:自动的将store里的state和组件进行关联。
MapStatetoProps:这个函数用于将store的state映射到组件的里props
mapdispatchToProps:将store中的dispatch映射到组件的props里,实现了方法的共享。
Connect方法:将组件和数据(方法)进行连接
react-redux安装
npm install react-redux --save
使用react-redux改写案例
import React from 'react';
import ReactDOM, { render } from 'react-dom';
import {createStore} from 'redux'
import {Provider,connect} from 'react-redux'
class Counter extends React.Component{
render(){
//下面方法mapStateToProps(state)进行赋值
const value = this.props.value;
//下面方法mapDispatchToProps(dispatch)进行赋值
const onAddClick = this.props.onAddClick;
//下面方法mapDispatchToProps(dispatch)进行赋值
const onjjClick = this.props.onjjClick;
return(
<div>
<h1>数据:{value}</h1>
<button onClick={onAddClick}>+1</button>
<button onClick={onjjClick}>-1</button>
</div>
)
}
}
function renducer(state={num:0},action){
console.log(action);
switch(action.type){
case "add":
state.num++;
break;
case "jj":
state.num--;
break;
default :break;
}
return {...state};
}
const store = createStore(renducer);
//把数据传入props
function mapStateToProps(state){
return{
value:state.num
}
}
//把修改的方法传入props
function mapDispatchToProps(dispatch){
return{
onAddClick:()=>{dispatch({ type:"add"})},
onjjClick:()=>{dispatch({type:"jj"})}
}
}
//将上面的这2个方法,将数据仓库的state和修改state的方法映射到组件上,形成新的组件。
//连接数据,调用上面两个方法进行赋值
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)//Counter是页面渲染组件
ReactDOM.render(
<Provider store={store}>
<App></App>
</Provider>,document.getElementById("root")
)
感谢观看!