<center>redux+react-redux</center>

墨蓝 2023-10-09 09:35 18阅读 0赞

本文主要记录下自己在react道路上的爬坑过程 以及对于刚学习redux的同学提供一些可供参考的例子。

要知道redux和react并没有半毛钱的关系，redux甚至可以和jq一起用。 react-redux才是react的用于便捷操作redux的第三方插件。所以呢，学习react-redux之前我们要比较熟悉的了解redux的思想。

**首先安装react-redux：**

`npm install react-redux --S`

import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import { createStore } from 'redux';
    import { Provider, connect } from 'react-redux';
    
    class App extends Component {
        render() {
            const { PayIncrease, PayDecrease } = this.props;
            return (
                <div className="App">
                    <div className="App">
                        <h2>当月工资为{this.props.tiger}</h2>
                        <button onClick={PayIncrease}>升职加薪</button>
                        <button onClick={PayDecrease}>迟到罚款</button>
                    </div>
                </div>
            );
        }
    }
    
    const tiger = 10000
    
    //这是action
    const increase = {
        type: '涨工资'
    }
    const decrease = {
        type: '扣工资'
    }
    //这是reducer
    const reducer = (state = tiger, action) => {
        switch (action.type) {
            case '涨工资':
                return state += 100;
            case '扣工资':
                return state -= 100;
            default:
                return state;
        }
    }
    
    //创建store
    const store = createStore(reducer);
    
    //需要渲染什么数据
    function mapStateToProps(state) {
        return {
            tiger: state
        }
    }
    //需要触发什么行为
    function mapDispatchToProps(dispatch) {
        return {
            PayIncrease: () => dispatch({ type: '涨工资' }),
            PayDecrease: () => dispatch({ type: '扣工资' })
        }
    }
    
    //连接组件
    App = connect(mapStateToProps, mapDispatchToProps)(App)
    
    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById('root')
    )

首先最明显的是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组件名

<center>redux+react-redux</center>

发表评论取消回复

还没有评论，来说两句吧...

相关阅读