react中使用redux

基本概念

Store

Store用来保存数据，整个应用中,只能有一个Store Redux中使用createStore来生成store

import {createStore} from 'redux'
/**
* 在createStore方法里，接受另外一个function
* fun 这个方法返回一个State对象
*/
export createStore(fun)

State

State对象包含所有的数据 通过Store.getState()可以获取当前时刻的State

Action

Action 是表示State要发生改变的一个动作，其中type属性是必须的，表示Action的名称，其他属性都可以自定义

//例如创建一个名为add的方法，这个方法返回一个名称为ADD的Action
function add(data){
return {
type:'ADD',
data
}
}

store.dispatch()方法是用来发送出Action的唯一方法，意思是通过 dispatch方法发送Action事件，来改变State里的值
```javascript
//dispatch方法第一个参数接收一个Action对象
store.dispatch(add(1));

注意：redux只会帮我们管理状态，不会触发页面的更新，所以，需要使用消息订阅来监听Store中state的改变

// store的subscribe方法用来监听状态的改变，这个方法接收一个function为参数，当状态发生改变时，会立刻调用这个方法，通知你数据改变了
store.subscribe(fun)

当状态发生改变后，我们可以暂时通过一个简单的方法来重新调用render方法，实现视图的更新

componentDidMount(){
    store.subscribe(()=>{
        this.setState({});
    })
}

Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer

Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

function reducer(state,action){
    //通过解构赋值拿到action的type,以及传递过来的data
    let {type,data} = action;
    switch (type){
        case  'xxx':
            //根据不同的type类型，对state进行处理，返回新的state
            return newstate;
        default:
            //默认情况下，直接返回之前的state
            return state;
    }
}

引入redux

npm install redux --save

在项目src目录下创建redux目录

新建 store.js

//引入redux
import {createStore} from 'redux'
//引入当前目录下的Reducer
import reducer from './reducer'
//暴露一个通过createState 方法创建的Store
export default createStore(reducer);

reducer.js

//设置初始值为0
let initState = 0;
//创建一个reducer函数
export default function reducer(state = initState,action){
    let {type,data} = action;
    //判断action类型，并对state做出相应处理
    switch (type) {
        case 'add'://如果是加
            return state + data;
        case 'subtract'://如果是减
            return state - data;
        default:
            return state;
    }
}

action.js

//创建并导出一个用于加数字的action
export function addNum(data){
    return {
        type:'add',
        data
    }
}
//创建并导出一个用于减数字的action
export function subtractNum(data){
    return {
        type:'subtract',
        data
    }
}

在组件中引入，实现不同组件之间的数据共享

Home.jsx

import React, { Component } from 'react'
import Style from './index.module.css'
import store from '../../redux/store'
import {addNum,subtractNum} from '../../redux/action'
export default class Home extends Component {

    componentDidMount(){
        store.subscribe(()=>{
            this.setState({});
        })
    }
    add = ()=>{
    //调用dispatch方法，修改state的值
        store.dispatch(addNum(1));
    }
    subtract = ()=>{
    //调用dispatch方法，修改state的值
        store.dispatch(subtractNum(1));
    }

    render() {
        let num = store.getState();
        return (
            <div className={Style.home}>
                <p className={Style.title}>Home组件</p>
                <p className={Style.tit}>当前计数值为:{num}</p>
                <div className={Style.btnBox}>
                    <button onClick={this.add} className={Style.btn}>加</button>
                    <button onClick={this.subtract} className={Style.btn}>减</button>
                </div>
            </div>
        )
    }
}

About.jsx About 组件用来展示同步展示Redux里的state

import React, { Component } from 'react'
import Style from './index.module.css'
import store from '../../redux/store'
export default class About extends Component {
    componentDidMount(){
        store.subscribe(()=>{
            this.setState({});
        })
    }
    render() {
        let num = store.getState();
        return (
            <div className={Style.about}>
                <p className={Style.title}>About组件</p>
                <p className={Style.tit}>Home组件中的计数结果：{num}</p>
            </div>
        )
    }
}

效果截图

当点击Home组件中的加减按钮时，About组件内的计数也会同步发生改变

示例项目查看