[JavaScript知识库]React使用react-redux搭配redux流程和介绍详解

概念：

react-dedux：Redux 官方提供的 React 绑定库。 具有高效且灵活的特性。不是 Redux 内置组件，需要单独安装。

说白了就是：react-dedux就是 redux专门匹配react应用的组件库。二次封装处理的产物，非必须。

或者 自己写个全局工具方法处理 redux，也能类似react-dedux。只是不需要挂载App外层，每个组件使用的时候引用一下 该全局方法（替换 原来react-dedux用connect时候需要引用一次）。有兴趣可以自己捣鼓下。

本文只介绍 react-redux。

.

官网：

https://www.redux.org.cn/docs/react-redux/

.

创建 Redux 的 store对象（必须）

react-dedux是 redux适配react的二次封装处理，需要依赖 store对象。

此步查看： https://blog.csdn.net/weixin_44461275/article/details/123176474

里面介绍了Redux store 的 初始定义变量、reducer、创建store、封装actions派发。

.

安装：react-dedux

npm install --save react-redux
或
cnpm install --save react-redux
或
yarn add react-redux

.

使用步骤 :

第一步：Provider 嵌套到根组件

此步骤，是把redux的store 挂载到全局。在App下 任何一个组件页面都能拿到。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './views/App';
import { Provider } from 'react-redux';
import store from './store'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

.

第二步：调用 state 和 action

方式一： 直接使用

import React from "react";

function DEMO(props) {
    let { getState, dispatch } = props?.store;

    function handleAction() {
    	// action 派发更新数据
        dispatch({
            type: 'ADD_DEMO',
            data: 333
        })
        
        // 获取当前store变量的值
        let demo = getState().demo;
        console.log(demo) // 0 => 123
    }

    return (
        <div onClick={handleAction}>点击更改redux</div>
    );
};

export default DEMO;

方式二： 使用连接器 connect 获取store

export default connect(handleState, handleAction)(DEMO);

参数说明：

• connect：连接器，获取全局store数据的方法。任何组件引用都能拿到。
• handleState：自定义返回state变量。可以过滤、新增处理state。不写默认返回全部store中的state
• handleAction：自定义使用actions方法。可以自定义action方法。不写默认返回全部actions
• DEMO：当前页面组件

示例：

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

function DEMO(props) {
    let { demo, DIS_AddDemo, store } = props;

    function handleAction() {
        DIS_AddDemo(77777); // 调用自定义action方法
        console.log(demo) // 0 => 77777
    }

    return <div onClick={handleAction}>点击更改redux</div>
};

// 自定义返回state
const handleState = (state, store) => {
    return {
        demo: state.demo, // 接收全部 state，自定义处理返回当前需要的
        // 其他state...
    }
}

// 自定义使用actions方法
const handleAction = (dispatch, store) => {
    return {
        DIS_AddDemo: params => {
            dispatch({
                type: 'ADD_DEMO',
                demo: params
            })
        },
        // 其他action...
    }
}

export default connect(handleState, handleAction)(DEMO);

说白了就是：connect可以获取并且自定义变量方法。如果定义了就返回定义的，否则走默认。

dispatch 是 action用来更新 reducer的判断处理的方法。
每个自定义action，就需要用dispatch 进行触发。

记住这句话：用啥定义啥，其他全局拿。

好了，有问题留言。仅个人见解，和官网未必一致，不喜勿喷。