zoukankan      html  css  js  c++  java
  • react-redux

    ## 4.求和案例_react-redux基本使用
                (1).明确两个概念:
                            1).UI组件:不能使用任何redux的api,只负责页面的呈现、交互等。
                            2).容器组件:负责和redux通信,将结果交给UI组件。
                (2).如何创建一个容器组件————靠react-redux 的 connect函数
                                connect(mapStateToProps,mapDispatchToProps)(UI组件)
                                    -mapStateToProps:映射状态,返回值是一个对象
                                    -mapDispatchToProps:映射操作状态的方法,返回值是一个对象
                (3).备注1:容器组件中的store是靠props传进去的,而不是在容器组件中直接引入
                (4).备注2:mapDispatchToProps,也可以是一个对象


    ## 5.求和案例_react-redux优化
                (1).容器组件和UI组件整合一个文件
                (2).无需自己给容器组件传递store,给<App/>包裹一个<Provider store={store}>即可。
                (3).使用了react-redux后也不用再自己检测redux中状态的改变了,容器组件可以自动完成这个工作。
                (4).mapDispatchToProps也可以简单的写成一个对象
                (5).一个组件要和redux“打交道”要经过哪几步?
                                (1).定义好UI组件---不暴露
                                (2).引入connect生成一个容器组件,并暴露,写法如下:
                                        connect(
                                            state => ({key:value}), //映射状态
                                            {key:xxxxxAction} //映射操作状态的方法
                                        )(UI组件)
                                (4).在UI组件中通过this.props.xxxxxxx读取和操作状态



    ## 6.求和案例_react-redux数据共享版
                (1).定义一个Pserson组件,和Count组件通过redux共享数据。
                (2).为Person组件编写:reducer、action,配置constant常量。
                (3).重点:Person的reducer和Count的Reducer要使用combineReducers进行合并,
                        合并后的总状态是一个对象!!!
                (4).交给store的是总reducer,最后注意在组件中取出状态的时候,记得“取到位”。

    ## 7.求和案例_react-redux开发者工具的使用
                (1).yarn add redux-devtools-extension
                (2).store中进行配置
                        import {composeWithDevTools} from 'redux-devtools-extension'
                        const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

    ## 8.求和案例_react-redux最终版
                (1).所有变量名字要规范,尽量触发对象的简写形式。
                (2).reducers文件夹中,编写index.js专门用于汇总并暴露所有的reducer
  • 相关阅读:
    严蔚敏数据结构线性表操作
    strcpy/strncpy、strcat/strncpy的替代方案strlcpy,strlcat
    使用DNS的反向区域,解决通过IP反向查询主机名,适合web环境通过IP定位故障主机名
    FreeBSD漏洞程序升级
    定义制造业操作(定义 MES/MOM 系统)
    定义制造业操作(定义 MES/MOM 系统)
    EF / EF CORE 打印SQL
    远程连接桌面Azure AD(Azure AD Joined Computer)
    《精通CSS第3版》(6)Flexbox
    FastNat内网穿透,给开发人员送的硬货福利限时送
  • 原文地址:https://www.cnblogs.com/sunmarvell/p/14454184.html
Copyright © 2011-2022 走看看