前言

本文目的不是介绍 react-redux 的使用，而是要动手实现一个简易的 react-redux入门案例，希望能够对你有所帮助~

react-redux & redux

在学习react-redux之前，我们有必要了解一下它与redux的区别,简单的来说:

redux是React中进行state状态管理的JS库，用于进行全局的状态管理
React-Redux是用于连接React和Redux的。使用React-redux可以使Redux部分代码更简洁更明了

计数器案例

首先我们能从一张图开始复习一下redux:
接下来我们来看看这个简单的案例:

当点击 +1 按钮，数值加1(state： { count: 0 } )

Action（研究员）：描述要执行的行为动作，比如要让计数器的值+1->(提出)
Reducer（劳动者）：接收 Action 完成该动作，比如完成值加1得到新状态 { count: 1 }->(实现)
Store（管理者）：是 Action 和 Reducer 的桥梁，将 Action 传递给 Reducer->(维护)

具体实现

前期准备

打开VSCode终端
输入npx create-react-app + 项目名称(这里为react-redux-demo) 搭建react脚手架
提醒:删除多余的配置文件,只留下(App.css,App.js,index.js)并清除三个文件下不必要的代码
进入新的项目文件夹
安装相关依赖
npm i react-redux
npm i redux
npm run start启动项目

项目目录

实操过程

构建 store 和 reducer

创建 reducer/index.js 构建reducer来响应actions

// 赋予state初始值
const initState={
    count:0
}
// reducer接收两个参数state & action
exports.reducer=(state=initState,action)=>{
    //使用switch匹配
    switch(action.type){
        // 如果是(ComA)下dispatch传来的type 则成功响应
        case 'add_action':
        // 响应的结果是count+1
        return{
            count:state.count+1
        };
        default:
            return state
    }
}

创建 store/index.js 通过 createStore 方法把我们的reducer传入进来

import {createStore} from 'redux'
// 导入我们自己创建好的reducer
import {reducer} from '../reducer'
// 构建store
const store = createStore(reducer)
export default store

在 app.js中引入 store

搭建页面结构

创建一个组件 ComA 里面放一个button
创建另一个组件 ComB 里面放一个div 用来显示数字
在app.js 中引入两个组件

import './App.css';
import store from './store/index'
// 引入provider组件 利用这个组件包裹我们的结构
// 从而达到维护store的效果
import {Provider} from 'react-redux'
import ComA from './pages/ComA';
import ComB from './pages/ComB';

function App() {
  return (
    // 保证全局只有一个store
    <Provider store={store}>
        <div className="App">
          <ComA />
          <ComB />
        </div>
    </Provider>
  );
}

export default App;

Provider组件的实现

由上述代码中，引申出了一个Provider，这是react-redux中的两个重要成员之一(另一个稍后会出现)，我们不难看出:

Provider组件是在react-redux中导入
需要利用Provider组件对我们整个结构进行包裹
给我们Provider组件设置 store属性而这个值就是我们通过createStore构建出来的 store实例对象

page目录

ComA 发送 action

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

class ComA extends React.Component{
    handleClick=()=>{
        // 组件内部拿到传来的值 this.props
        // 发送action
        this.props.sendAction()
    }
    render(){
        return(
            <button onClick={this.handleClick}>+</button>
        )
    }
}
const mapDispatchToProps=(dispatch)=>{
    return{
        sendAction:()=>{
            // 利用dispatch发送一个action
            // 定义一个type属性
            dispatch({
                type:'add_action'
            })
        }
    }
}
// A是发送方 
export default connect(null,mapDispatchToProps)(ComA)

实现过程一

导入 connect
利用 connect 对组件进行加强
connect(要接受数组的函数，要发送action的函数)(放入要加强的组件)
构建了一个函数 mapDispatchToProps(dispatch)
dispatch:就是用来发送给action的
在这个函数里面就可以返回一个对象
在组件的内部就可以通过 this.props来拿到这个方法

ComB 接受 state

connect组件的实现

刚刚我们讲到react-redux的一个重要成员Provider你还记得吗，现在又出现了另一个新的重要核心成员connect:
它是一个方法,使组件ComA/ComB和store进行关联(方便组件获得store中的state)

connect参数说明

mapStateToProps(state,ownProps) 将store中的数据作为props绑定到组件上 ->接收方
mapDispatchToProps(dispatch,ownProps) 将action作为props绑定到我们的函数上 ->发送方
每当我们使用时，我们都要弄明白谁是接收方<ComB>，谁是发送方<ComA>,这点很重要!!!

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

class ComB extends React.Component{
    render(){
        // 下面return state拿到传来的props
        // console.log("ComB",this.props)
        return(
            <div>{this.props.count}</div>
        )
    }
}
const mapStateToProps=state=>{
    // console.log("ComB",state);
    return state
}
// B组件是接收方 实现第一个参数
export default connect(mapStateToProps)(ComB)

实现过程二

导入connect 方法(利用connect 对组件进行加强)
ComB属于接收方就需要实现connect的参数mapStateToProps
(里面的第一个参数就是我们最关心的state)
把这个state进行return 才能在组件内部获取最新的数据
ComB 是否拿到数据关键的点是 reducer
(只有reducer 里面返回了新的state的时候我们才能得到值)

最后

如有优化或者错误的地方，欢迎各位大佬在评论区里指出。最后，如果此篇文章能给大家带来帮助的话，谢谢各位的点赞
参考:(12条消息) React-redux_探鱼不是鱼的博客-CSDN博客_reactredux

【保姆级React篇】一招就会react-redux入门案例

前言