首页 > 其他 > 详细

react-redux

时间:2021-02-26 23:31:18      阅读:37      评论:0      收藏:0      [点我收藏+]
## 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

react-redux

原文:https://www.cnblogs.com/sunmarvell/p/14454184.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!