Redux的基本使用方法(计数器)

Redux就像Vuex一样哈哈，可以让组件之间的数据传递变得方便


传统的数据传递非常的麻烦，如果最上层组件要将数据传递给最下层的组件需要逐级传递，组件的耦合度会变得非常的高，要是其中一个组件出现问题的话会导致整个项目出现问题。

而Redux是把数据放到一个单独的空间中，需要使用数据的时候就不需要逐级传递了，直接去这个单独的空间中取数据就行了

首先安装Redux

npm i  --save-dev Redux

创建一个单独的.js文件用来存储数据以及关于这个数据的方法

//count.js
const counter=(state=0,action)=>{
    switch(action.type){
        case "INCREMENT":  //加一
            return state + 1;
        case "DECREMENT": //减一
            return state - 1;    
        default:
            return state
    }
}
export default counter 

然后再需要使用这个数据的组件中引入Redux和这个count.js文件

import {createStore} from "redux"
import reducer from './counter'

在这个组件中创建Store仓库

//创建store仓库
const store=createStore(reducer)

到这里引入就完成了

此时我们需要调用store中的加减方法

Add=()=>{
        store.dispatch({type:"INCREMENT"})   
    }
Sub=()=>{
        store.dispatch({type:"DECREMENT"}) 
    }

调用Add方法或者Sub就能触发count.js中的Switch选项
调用Add触发INCREMENT （加一）
调用Sub触发DECREMENT（减一）

监听state的变化，当数据发生变化时将数据打印在控制台上

store.subscribe(()=>console.log(store.getState()))

完整代码

//App.jsx
import React from 'react'
import {createStore} from "redux"
import reducer from './counter'

//创建store仓库
const store=createStore(reducer)
store.subscribe(()=>console.log(store.getState()))

export default class   extends React.Component{
    constructor(){
        super()
        this.state={}
    }
    Add=()=>{
        store.dispatch({type:"INCREMENT"})
        
    }
    Sub=()=>{
        store.dispatch({type:"DECREMENT"})
        
    }
    render(){
        return(
        <div>       
<button className="btn btn-primary" onClick={this.Add}>+</button>
<button className="btn btn-primary" onClick={this.Sub}>-</button>
                </div>
              )
     }
}

//count.js
const counter=(state=0,action)=>{
    switch(action.type){
        case "INCREMENT":
            return state + 1;
        case "DECREMENT":
            return state - 1;    
        default:
            return state
    }
}
export default counter 

感觉Redux 比Vuex更简单点惹