Redux入门案例：Redux与React更配哦

上一篇文章：
Redux入门案例：Redux初体验

---

准备工作

1.构建React项目

方法已在上篇文章阐述，不再重复

2.安装相关依赖

yarn add redux;yarn add react-react

3.构建Store和Ruducer

创建reducer和store文件夹，都放入index.js

// ruducer
export function reducer(state,action) {
    return state;
}

// store
import {createStore} from 'redux'
import {reducer} from '../reducer'

export default createStore(reducer)

4.搭建页面结构

创建pages目录，目录下创建ComA和ComB

// ComA
import React from 'react'

export default class ComA extends React.Component{
    render(){
        return(
            <button>
                +
            </button>
        )
    }
}

//ComB
import React from 'react'

export default class ComB extends React.Component{
    render(){
        return(
            <div>
                1
            </div>
        )
    }
}

在app.js中引入两组件

import React from 'react';
import logo from './logo.svg';
import './App.css';
import store from './store'
import ComA from './pages/ComA'
import ComB from './pages/ComB'

function App() {
  return (
    <div className="App">
        <ComA/>
        <br/><br/>
        <ComB/>
    </div>
  );
}

export default App;

Provider组件实现

import React from 'react';
import logo from './logo.svg';
import './App.css';
import store from './store'
import ComA from './pages/ComA'
import ComB from './pages/ComB'
import { Provider } from 'react-redux'

function App() {
    return (
        <Provider store={store}>
            <div className="App">
                <ComA />
                <br /><br />
                <ComB />
            </div>
        </Provider>
    );
}

export default App;

connect使用 & 收发action

ComA发送action

1. 导入connect
2. 利用connect对组件进行加强
   connect（要接收数组的函数，要发送action的函数）（放入要加强的组件）
3. 实现connect第二个参数
4. 构建一个函数mapDispatchToProps（dispatch）
   dispatch：发送给action
5. 在这个函数里返回一个对象
   key是方法名
   value：调用dispatch去发送action
6. 在组件的内容就可以通过this.props拿到这个方法了

// ComA
import React from 'react'
import {connect} from 'react-redux'

class ComA extends React.Component{
    handleClick = () => {
        console.log("ComA:",this.props)
        this.props.sendAction()
    }
    render(){
        return(
            <button onClick={this.handleClick}>
                +
            </button>
        )
    }
}

/**
 * This function has a return varial,return varial is an object
 * @param {*} dispatch
 */

const mapDispatchToProps = (dispatch) => {
    return {
        sendAction:() => {
            dispatch({
                type:'send_add'
            })
        }
    }
}

export default connect(null,mapDispatchToProps)(ComA)

// ruducer
const initState = {
    count:0
}

export function reducer(state=initState,action) {
    console.log("reducer:",action)
    switch (action.type) {
        case "send_add":
            
            return {
                count:state.count + 1
            }
    
        default:
            return state;
    }
    return state;
}

ComB接收state

1. 导入connect方法
2. 利用connect对组件进行加强
3. ComB属于接收方，就需要实现connect的第一个参数
4. mapStateToProps里面的一个参数就是我们很关心state
5. 把这个state进行return才能在组件的内部获取到 最新的数据

//ComB
import React from 'react'
import {connect} from "react-redux"

class ComB extends React.Component{
    render(){
        console.log("ComB:",this.props)

        return(
            <div>
                {this.props.count}
            </div>
        )
    }
}
const mapStateToProps = state => {
    console.log("ComB:",state)
    return state
}

export default connect(mapStateToProps)(ComB)

数据传递流程

DrawIO文件下载地址

小结

1. 发送方注意connect方法的第二个参数，将加强后的对象返回值返回
2. 发送的对象应该带有type，不然对导致redux报错
3. 接收方注意connect方法的第一个参数，通过this.props读取加强后的返回值