react-redux 的基本使用

最新推荐文章于 2022-07-12 18:55:59 发布

不忘初心1995

最新推荐文章于 2022-07-12 18:55:59 发布

阅读量383

点赞数 1

文章标签： react

本文链接：https://blog.csdn.net/qq_42451776/article/details/118636421

版权

文章目录

- react-redux
- 基本使用

react-redux

React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。
UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑

基本使用

index.js 中

import store from "./store"
import {Provider} from "react-redux"

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

在需要的页面

import React, { memo } from 'react'
// 导入连接 ui和容器组件的方法
import { connect } from "react-redux"

// 导入需要触发的actions
import {
    incAction,
    decAction,
} from "@/store/actionCreators.js"

function Home(props) {
    return (
        <div>
            <h1>
                home
            </h1>
            <p>
                直接在props上使用即可
                count-----{props.counter}
            </p>
            {/* props.dispatch 需要拿到 incAction() 执行后的值 */}
            <button onClick={() => { props.incActionS() }}>+1</button>
            <button onClick={() => { props.decActionS() }}>-1</button>
        </div>
    )
}

const mapStateToProps = state => {
    return {
        counter: state.counter
    }
};
const mapDispatchToProps = dispatch => ({
    // 构造相关方法 来触发actions中的方法
    incActionS: function () {
        dispatch(incAction())
    },
    decActionS: function () {
        dispatch(decAction())
    }

})

export default connect(mapStateToProps, mapDispatchToProps)(memo(Home))

// 简写
export default connect(state => ({
        counter: state.counter
    }),{
    incActionS:incAction,
    decActionS:decAction
    })(memo(Home))