概念:
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);
形式 | handleState(自己起的) | handleAction(自己起的) | DEMO组件的props |
---|---|---|---|
connect(handleState, handleAction)(DEMO) | 定义 | 定义 | 自定义state变量、自定义action、全局state |
connect(handleState, null)(DEMO) | 定义 | 未定义 | 自定义state变量、dispatch方法、全局state |
connect(handleState)(DEMO) | 定义 | 无 | 自定义state变量、dispatch方法、全局state |
connect(null, handleAction)(DEMO) | 未定义 | 定义 | 自定义action、全局state |
connect(handleAction)(DEMO) | 无 | 定义 | 自定义action、dispatch方法、全局state |
connect()(DEMO) | 无 | 无 | dispatch方法、全局state |
说白了就是:connect可以获取并且自定义变量方法。如果定义了就返回定义的,否则走默认。
dispatch 是 action用来更新 reducer的判断处理的方法。
每个自定义action,就需要用dispatch 进行触发。
记住这句话:用啥定义啥,其他全局拿。
好了,有问题留言。仅个人见解,和官网未必一致,不喜勿喷。