redux react-redux 示例的快速上手体验

- 日理万妓 2023-06-09 15:28 132阅读 0赞

## 1.redux ##

要知道redux和react并没有半毛钱的关系，redux甚至可以和jq一起用。 react-redux才是react的用于便捷操作redux的第三方插件。所以呢，学习react-redux之前我们要比较熟悉的了解redux的思想。本文比较直接，不来虚的，直接上代码：  
首先就很熟悉了   
1 使用官方脚手架

create-react-app redux-demo

2 环境搭建好之后 继续安装redux

npm install redux --S

进入到项目文件夹 把我们用不到的全咔咔删掉

在src/index.js里引入redux并创建action reducer和store  
src/index.js：

import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    
    const oldState = {
        title: 'redux使用',
        type:'none'
    };
    
    const reducer = (state = oldState, action) => {
        switch (action.type) {
            case 'up':
                state = { title: '增加数据', type: 'up' };
                return state;
                break;
            case 'down':
                state = { title: '减少数据', type: 'down' };
                return state;
            default:
                return state;
        }
    }
    
    //创建store
    const store = createStore(reducer);
    
    console.log(store.getState())
    
    //订阅事件
    store.subscribe(() =>
      console.log(store.getState())
    );
    
    //派发事件
    store.dispatch(increase)
    
    ReactDOM.render(
            <App />
        , document.getElementById('root'));
    
    serviceWorker.unregister();

这里大概解释下每个的意思：   
**action**：行为 它是一个对象 里面必有type来指定其类型 这个类型可以理解为你要做什么，reducer要根据action的type来返回不同的state 每个项目有且可以有多个action  
**reducer**： 可以理解为一个专门处理state的工厂 给他一个旧数据它会根据不同action.type返回新的数据 也就是：旧state + action = 新state 每个项目有且可以有多个reducer  
**store**： store本质上是一个状态树，保存了所有对象的状态。任何UI组件都能直接的从store访问特定对象的状态。每个项目有且只能有一个store  
脑子里有了这些基本的概念后我们就可以把reducer放到createStore里并创建好store了

可以看到 代码的最后我们打印了**store.getState()** 这段代码简单理解就是打印下store里的数据

## 2.react-redux ##

这些就是基本的redux的知识。我们不难发现，这样其实挺麻烦的。你需要写好多好多东西，而且我们并没有把reducer，action什么的给分离出去，不然的话我还要往很多组件里面传很多东西。这对我们实际开发是很不友好的。  
所以， 这时候就十分迫切需要react-redux了。它的作用是帮助我们操作redux。有了它我们可以很方便的写redux。

安装react-redux：

`npm install react-redux --S`

### **组件App：** ###

import React from 'react';
    import { connect } from 'react-redux';
    import './App.css';
    import Left from './Left';
    import Right from './Right';
    
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {};
      }
    
      componentDidMount() {
    
      }
    
      handleChangeTitle() {
        const { PayIncrease, PayDecrease } = this.props;
        if (this.props.type == 'up') {
          PayDecrease();
        }else{
          PayIncrease();
        };
        console.log('改变title', this);
      }
    
      render() {
        return (
          <div className="App">
            <div className="App-title">
              <h1 onClick={this.handleChangeTitle.bind(this)}>欢迎使用后台管理系统-{this.props.title}</h1>
            </div>
            <header className="App-header">
              <Left />
              <Right />
            </header>
          </div>
        )
      }
    }
    
    export default connect(mapStateToProps, mapDispatchToProps)(App);
    
    //需要渲染什么数据
    function mapStateToProps(state) {
      // 返回数据
      return state;
    }
    
    //需要触发什么行为
    function mapDispatchToProps(dispatch) {
      return {
        PayIncrease: () => dispatch({ type: 'up' }),
        PayDecrease: () => dispatch({ type: 'down' })
      }
    }

### **reducer.js:** ###

### **store.js:** ###

import { createStore } from 'redux';
    import reducer from './reducer';
    
    
    const store = createStore(reducer);
    
    export default store;

### **index.js:** ###

import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import store from './redux/store';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>
        , document.getElementById('root'));
    
    serviceWorker.unregister();

action啊 reducer啊 store啊 想必大家都已经了解过了 这里不再做过多介绍。我们主要关注下哪里有变化：  
首先最明显的是demo中引入react-redux的Provider和connect，它们非常重要！这里先大概解释下它们的作用：  
Provider：它是react-redux 提供的一个 React 组件，作用是把state传给它的所有子组件，也就是说 当你用Provider传入数据后 ，下面的所有子组件都可以共享数据，十分的方便。  
Provider的使用方法是：把Provider组件包裹在最外层的组件，如代码所示，把整个APP组件给包裹住，然后在Provider里面把store传过去。注意：一定是在Provider中传store，不能在APP组件中传store。  
connect：它是一个高阶组件 所谓高阶组件就是你给它传入一个组件，它会给你返回新的加工后的组件，注重用法倒简单，深究其原理就有点难度。这里不做connect的深究，主要是学会它的用法，毕竟想要深究必须先会使用它。首先它有四个参数(\[mapStateToProps\], \[mapDispatchToProps\], \[mergeProps\], \[options\])，后面两个参数可以不写，不写的话它是有默认值的。我们主要关注下前两个参数mapStateToProps和mapDispatchToProps。  
connect的使用方法是：把指定的state和指定的action与React组件连接起来，后面括号里面写UI组件名。

除此之外demo中还多出了mapStateToProps mapDispatchToProps 他们又有什么作用呢？通俗一点讲的话就是：  
比如你在一个很深的UI组件里 当你想要获得store的数据就很麻烦。mapStateToProps就是告诉store你需要哪个state，需要什么数据就直接在mapStateToProps中写出来，然后store就会返回给你。同理，如果你想要dispatch派发一些行为怎么办呢，mapDispatchToProps就是告诉store你要派发什么行为，需要派发什么行为就在mapDispatchToProps中写出来，然后store就会把你想要派发的行为告诉reducer，接下来大家都应该知道了 reducer就会根据旧的state和action返回新的state。

文档结构如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70][]

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1][]

比较基础的redux和react-redux例子到这就结束了，谢谢阅览。。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70]: /images/20230531/94e38dff4654483a8f23527d23c6530b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1]: /images/20230531/e4768d17ff9542fba6d92bfcd79b8aca.png