关于对redux和react-redux的理解

Redux三大原则
单一数据源:整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中
State 是只读的:惟一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
使用纯函数来执行修改:为了描述 action 如何改变 state tree ,你需要编写 reducers。
store
Redux 应用只有一个单一的 store (不同于Flux)。它是数据管理中心。

action
action 是一个带有type的对象,dispatch一个action是改变state的唯一法门,代表着发生了一些事情。

reducer
是一个纯函数。Action 只是描述了有事情发生了这一事实,并没有指明应用如何更新 state。而这正是 reducer 要做的事情。(preState,action)=> newState。 永远不要在reducer里做这些操作

修改传入参数;
执行有副作用的操作,如 API 请求和路由跳转;
调用非纯函数,如 Date.now() 或 Math.random()
根据业务逻辑可以分为很多个reducer,然后通过combineReducers将它们合并

const RootReducer = combineReducers({
     video,
     books,
     news
})

我们需要的过程是component-》dispatch-》reducer-》subscribe(用来监听)-》getstate(监听之后调用,获得最新的wstate)-》component
利用react-redux我们可以省去很多步骤component-》actionCreator(data)-》reducer-》component
但是我们需要注意的是,将组件和redux关联起来需要mapStateToProps和mapDispatchToProps这两个函数作为参数!!
还有一个问题就是我们应该怎么利用redux发送ajax请求呢?那么就要使用我们的中间件了!!普通的action只是一个带有type的对象,在中间件扩展了redux-thunk之后,它就能允许我们在actionCreater中返回一个带有dispatch的function。这样我们就可以在异步代码中调用dispatch(action)来改变state。



弄一张阮一峰小哥哥的图

 

为什么要使用redux???在react中主要数据传输方式1、state;2、props (父传子) 回调函数(子传父,利用bind)getchildrenContext  https://blog.csdn.net/xuxiaoping1989/article/details/78480758(可以利用公共父组件实现兄弟之间的传递)

按需加载:
在 react-router 2.0时代, 按需加载需要用到的最关键的一个函数,就是require.ensure(),它是按需加载能够实现的核心。
在4.0版本,官方放弃了这种处理按需加载的方式,选择了一个更加简洁的处理方式。
 

 

最后书写组建注意的问题:
1、希望自己以后直接使用es6的class来定义一个组件
2、原生的html元素名以小写字母开头,而自定义的react类名需要以大写字母开头!!
3、组件类只能包含一个顶层标签!!(重点)
4、添加class属性要写成className,for属性需要写成htmlFor

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值