Redux学习笔记
Posted 做枚温婉的妹纸吧哈哈
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Redux学习笔记相关的知识,希望对你有一定的参考价值。
Redux
基本概念
store
store
管理整颗状态树。状态树是一个大的对象,有一颗颗state
节点构成。 它提供了dispatch
、getstate
、subscribe
这些方法来管理整个状态。
store
通过 createStore(reducer, initialState, middleware)
来创建。
store.getState()
返回state
对象。
dispatch和action
状态不能直接修改,view需要通过store.dispatch
方法来派发一个action,告知需要修改state的哪个部分。action是一个对象,必须包含type
属性。可以通过action creator
来生成action。
reducer(state=initialState, action)
当一个action
派发后,会自动调用reducer
函数进行state的修改,reducer内部也不能直接修改原state,需要返回一个新的state
,目的是为了保证一个时刻,一个view对应的state
是唯一的。reducer
是一个函数,接收(state, action)
作为参数,可通过 state = initialState
方式进行state的初始化。
reducer
的拆分:reducer
本质上是返回一个新的state
对象(树)。如果把所有的state
更新写到一个reducer
里,函数将会变得非常庞大,不利于维护。因此可以将reducer
拆分成多个函数,每个函数只维护state
树上的一个节点,最后合起来返回一个完整的state
树。redux
提供了combineReducers
用来将多个拆分出来的reducer
合成一个大的reducer
:
(1)state
节点名和reducer
函数同名:
(2)state节点名和reducer不同名:
参考:Redux中文文档
叫reducer
是因为它和数组方法reduce
的callback
参数类似:
Array.prototype.reduce(callback, initialValue).
callback
方法的参数为:previousValue
, currentValue
, currentIndex
, array
callback
上一次执行的结果作为下一次的previousValue
.
再看看reducer
函数reducer(previouseState, action)
。这样看来是不是和array
的reduce
很相似。
reducer是个纯函数,输入相同则输出相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。
可以通过Object.assign(, state, ...)
来返回一个新的对象,或者采用ES7提案,对象扩展运算符...state, …
。对于内部包含的引用类型,也是要返回一个新的数组或者对象(使用扩展运算符或者其他方式)。
参考:Redux中的reducer到底是什么,以及它为什么叫reducer?
subscribe
通过store.subscribe(listener)
来设置每当state
变化时需要执行的函数,传入render
函数则是state
变化后更新视图(listener
可通过store.getState
获得当前的state
)。
模拟Store
的实现:
可以看出当view触发状态变化的流程是:
在源码实现中,dispatch
的时候调用了reducer
和listener
。
redux适用场景
中间件
解决例如异步action等问题.具体参考Redux 入门教程(二):中间件与异步操作
redux-thunk
dispatch
一个action
是同步执行的,但有时候需要异步或者条件执行一个action
。redux-thunk
提供了一种方法,可以达到这个目的。此时的action creator
返回的不是一个对象,而是一个方法,这个方法内部可以异步或者条件地dispatch
一个action
。
这个返回的thunk action creator
接收dispatch
, getState
为参数。对于返回值,官网这样解释:
Any return value from the inner function will be available as the return value of dispatch itself. This is convenient for orchestrating an asynchronous control flow with thunk action creators dispatching each other and returning Promises to wait for each other’s completion
意思就是内部函数的返回值作为最外部dispatch
方法的返回值。
可参考官网例子,如何在内部方法里返回promise
进行dispatch
后的链式调用的。https://github.com/gaearon/redux-thunk
http://cn.redux.js.org/docs/advanced/AsyncActions.html
单向数据流
这意味着应用中所有的数据都遵循相同的生命周期,这样可以让应用变得更加可预测且容易理解。同时也鼓励做数据范式化,这样可以避免使用多个且独立的无法相互引用的重复数据。
react-redux
封装了在react中使用redux的一些API,使得使用更方便。需遵守其组件的拆分规则。
UI组件和容器组件
UI组件
容器组件
所有的 UI 组件都由用户提供,容器组件则是由 React-Redux 自动生成。状态管理交给容器组件。
主要API
connect
将用户定义的UI组件包装为一个容器组件。
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
mapStateToProps(state, ownProps)
返回一个对象,组件props
参数到state
的映射:
const mapStateToProps = (state) =>
return
todos: getVisibleTodos(state.todos, state.visibilityFilter)
返回对象Key
值对应组件的一个props
参数。
组件内部可以通过this.props.todos
访问传入的state
。组件会订阅store
,当state
改变,props
也跟着改变,触发UI组件的重新渲染。ownProps
是一个对象,里面包含自己通过组件传入的props
,而不是state
映射的props
。如果connect
不传入mapStateToProps
,则UI组件不会订阅store
,当state
更新的时候,UI不会重新渲染。
mapDispatchToProps(dispatch, ownProps)
组件的参数props
到store.dispatch
的映射。即组件内部怎么派发一个action。
有以下两种调用方式:
(1)函数
const mapDispatchToProps = (
dispatch,
ownProps
) =>
return
onClick: () =>
dispatch(
type: 'SET_VISIBILITY_FILTER',
filter: ownProps.filter
);
;
函数返回一个对象,对象Key
值对应组件的一个props
参数,value
是调用了dipatch
的一个函数。
(2)对象
const mapDispatchToProps =
onClick: (filter) =>
type: 'SET_VISIBILITY_FILTER',
filter: filter
;
这种方式,键值为action creator
。返回的action
会由Redux自动发出。
Provider组件
使组件层级中的 connect()
方法都能够获得 Redux store
. 实现原理是利用了context
.
<Provider store=store>
<App />
</Provider>,
以上是关于Redux学习笔记的主要内容,如果未能解决你的问题,请参考以下文章