react简单例子引入redux和react-redux

准备

没接触过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")
)

感谢观看！