Redux是一种状态管理解决方案, 用于中大型项目中, 数据比较庞大, 组件间数据交互多的情况下使用.
解决组件间的数据通信
解决数据和交互较多的应用

本文将对 redux 和 react-redux两部分介绍

redux部分

安装 Redux

npm i redux

基本使用步骤

1.准备 创建数据仓库所需要的入参函数, 作用:1.初始化数据 2.通过获取动作,改变数据

const reducer = (state={num:0},action)=>{
    判断 action的变量...
    更改 state...
    return state
}

2.创建数据仓库
const store = createStore(reducer);

3.获取数据
let state = store.getState();

4.修改数据(通过动作修改数据)
store.dispatch({action的变量:变量的值})

5.修改视图(监听数据变化, 重新渲染内容)
store.subscribe(()=>{渲染code...})

查看store对象

控制台输出store对象,结构如下:

数据仓库结构.png

store.dispatch() :

触发动作, 改变state的值. 入参是动作action的值.
如store.dispatch({type:'add'}) 可以在reducer方法中的action.type获取

store.getState() :

获取状态数据

store.subscribe() :

监听数据变化, 重新渲染内容

简单案例代码

实现一个计数器, 有"加"和"减"两个按钮, 点击按钮更改显示的数值.

import React from 'react';
import ReactDOM from 'react-dom';

import {createStore} from 'redux'

//用于通过动作(action)创建新的状态(state)
// 1.准备 创建数据仓库所需要的入参函数, 作用:1.初始化数据 2.通过获取动作,改变数据
const reducer = (state={num:0},action)=>{
    switch(action.type){
        case '+':
            state.num++;
            break;
        case '-':
            state.num--;
            break;
        default:
            break;
    }
    return state;
}

// 2.创建数据仓库
const store = createStore(reducer);
console.log('store',store)

function add(){
    // 4.修改数据(通过动作修改数据)
    store.dispatch({type:'+'})
}
function subtraction(){
    store.dispatch({type:'-'})
}

class App extends React.Component{
    render(){
        // 3.获取数据
        let state = store.getState();
        console.log("state",state)

        return <div>
            <span>current number is </span>
            <input type='button' value=' + ' onClick={add}></input>
            <span> {store.getState().num} </span>
            <input type='button' value=' - ' onClick={subtraction}></input>
        </div>
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

// 5.修改视图(监听数据变化, 重新渲染内容)
store.subscribe(()=>{ReactDOM.render(<App />, document.getElementById('root'));})

react-redux部分

import React from 'react';
import ReactDOM from 'react-dom';

import {createStore} from 'redux'
import {Provider, connect} from 'react-redux'

/* 
    使用React-redux的案例
*/

//用于通过动作(action)创建新的状态(state)
// 1.准备 创建数据仓库所需要的入参函数, 作用:1.初始化数据 2.通过获取动作,改变数据
const reducer = (state={num:0},action)=>{
    switch(action.type){
        case '+':
            state.num++;
            break;
        case '-':
            state.num--;
            break;
        default:
            break;
    }

    return {...state};  //结构以后再次包装成json对象, 这样可以改变hash值, state变化了, 才会触发重新渲染
}

// 2.创建数据仓库
const store = createStore(reducer);
console.log('store',store)


class MyComponent extends React.Component{
    render(){
        // 3.获取数据
        let value = this.props.value;
        let addClick = this.props.addClick;
        let subtractionClick = this.props.subtractionClick;

        console.log('this.props',this.props)
        return <div>
            <span>current number is </span>
            <input type='button' value=' + ' onClick={addClick}></input>
            <span> {value} </span>
            <input type='button' value=' - ' onClick={subtractionClick}></input>
        </div>
    }
}

const add = {
    type: '+'
}
const subtraction = {
    type: '-'
}
// 4. store的数据/动作 与props绑定
// props的函数属性与store的动作绑定
function mapDispatchToProps(dispatch){
    return {
        addClick: ()=>{dispatch(add)},
        subtractionClick: ()=>{dispatch(subtraction)}
    }
}
// props的数值属性与store的state绑定
function mapStateToProps(state){
    return {
        value: state.num
    }
}

// 5.将store的动作与state映射到组件上, 生成新组建
const App = connect(
    mapStateToProps,
    mapDispatchToProps
)(MyComponent)

// 6.指定store
// Provider: 自动将store中的state和组件进行关联
ReactDOM.render(
    <Provider store={store}>
        <App></App>
    </Provider>
    , document.getElementById('root'));

/*

React-redux

1. 准备一个用来初始化store的函数reducer

2. 用reducer作为 createStore()方法的入参初始化store

3. 创建映射函数
    创建映射 组件props的属性与 store的state属性 的映射函数 mapStateToProps
    创建映射 组件props的属性与 触发action动作 的映射函数 mapDispatchToProps

4. 创建组件C, 在组件C中使用props映射得到的属性和函数

5. 使用connect方法将组件两个映射函数和组件C关联, 并生成新的组件A

6. 使用Provider将store和组件关联, 实现自动渲染
*/