一个炒鸡简单的react-redux入门实例

主要用于理解react-redux如何运用，这里不讲解react基本知识

代码亲测可用~~~~~~~~

例子效果：

1. 准备流程

1.1 安装依赖

npm install redux --save
npm install react-redux --save
npm install -g dva-cli (当时我因为没有这个报错了~ _{也许你以前安装过，这个就没必要了})

1.2 搭建页面结构

1. 创建一个组件ComA，里面放一个button按钮
2. 创建另一个组件ComB，里面放一个div，用来显示数字
3. 在Home.js中引入两个组件

1.3 构建store和reducer

1. 创建redux/index.js文件，构建reducer来响应action
2. 创建store/index.js文件，通过createStore方法，把我们的reducer传入进来
3. 在Home.js中引入store

例子文件结构：

2. 代码

1. ComA.js文件 导入connect方法并调用，connect方法会有一个返回值，而这个方绘制就是加强后的组件

import React, { Component } from 'react'
import {connect} from 'react-redux'
// connect-参数说明
// mapStateToProps(state,ownProps)这个函数允许我们将store中的数据作为props绑定到组件上
// state:redux中的store  ownProps：自己的props

// mapDispatchToProps(dispatch,ownProps) 将action作为props绑定到我们自己的函数中
// dispatch 讲啥store.dispatch()
// ownProps：自己的props

class ComA extends Component {
    handleClick = ()=> {
        console.log('this.props',this.props)
        //发送action
        this.props.sendAction()
    }

    render() {
        return (
            <div className="P-home">
                <h3>一个超级简单的react-redux实例</h3>
                <button onClick={this.handleClick}>+</button>
            </div>
        )
    }
};
/**
 * 这是函数要有一个返回值，返回值是一个对象
 * @param {*} dispatch 
 */
const mapDispatchToProps = (dispatch) =>{
    return {
        sendAction: ()=>{
            //利用dispatch发送一个action
            //传递action对象 我们要定义一个type属性
            dispatch({
                type: "add_action"
            })
        }
    }
};

//A发送方，所以要实现connect第二个参数
export default connect(null, mapDispatchToProps)(ComA);
// export default ComA

2. ComB.js文件 导入connect方法并调用

import React from 'react';
import {connect} from 'react-redux'

class ComB extends React.Component{
    render(){
        return (
        <div>{this.props.count}</div>
        ) 
     }
}

const mapStateToProps = (state) => {
    console.log('ComB:',state)
    return state
}
export default connect(mapStateToProps)(ComB);

3. Home.js 导入provider组件，用这个组件包裹整个结构，从而达到统一维护store的效果

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import store from "../store"
import ComA from './ComA.js'
import ComB from './ComB.js'

class Home extends Component {
    render() {
        return (
            <Provider store={store}>
               	<ComA/>
            	<ComB/>
            </Provider> 
        )
    }
}

export default Home

4. reducer/index.js

const initState = {
    count: 1,
}

exports.reducer = (state = initState, action) => {
    switch (action.type) {
        case "add_action":
            return {
                count:state.count + 1
            };
        default:
            return state;
    }
};

5. store/index.js

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

3. 例子实现流程图

本次分享内容来源B站视频：https://b23.tv/0nERYx