“如果你不知道是否需要使用Redux,那就是不需要。”
在React中,其实是有一套自己的生命周期函数以及状态管理的方法的。
那么我们需要在何时使用Redux?
我的理解是:对于单页面程序,在页面操作越来越多,逻辑越来越复杂的情况下,其实是需要将一些组件的状态共享,以便在任何地方都可以使用的。此时单纯的使用React已经不能解决问题了,需要使用Redux。利用redux单一数据源(store)的特点,将所有状态放在一起进行管理,在任何地方使用。
下面介绍以下几个重要的东西:
- store
redux的特点就是它只有一个store,将所有state存放在同一个store中管理,store主要有以下几个方法:
(1)getState() 方法获取 state
(2) dispatch(action) 方法更新 state
(3) subscribe(listener) 添加监听器
- props
props用于定义外部接口。react是单项数据流,props本身是不可改变的,不过子组件的props可以通过父组件的state的传递进而进行改变。
- state
state即是状态,用于记录组件内部的状态。我们可以用state来完成对行为的控制、数据的更新、界面的渲染,由于组件不能修改传入的props,所以需要记录自身的数据变化。说白了,有一些状态是会在交互或者发请求等过程中发生改变的,例如:panel的打开与关闭,radio的勾选与取消,下拉框选中值的切换…这些能改变的状态会被存为state。
Redux中明确规定,一个state对应一个view,state相同,view就相同。state改变,view的界面就会跟着改变。我们要如何改变state,就有了接下来的action。
- action
action顾名思义就是个动作,用来更新对应的state,是一个包含当前state以及自身actionType类型的对象。
- action creator
action的创建函数。在actionCreator中主要有两种函数:
一种是用来更新state的action,该函数返回一个对象。如下:
const updateAge = (age: string): object => { |
另一种是用来发请求、加载数据的函数,该函数可以返回一个方法,也可以是一个promise对象。如下:
const getInfo: () => Promise<T> = () => { |
- reducer
reducer是一个纯函数,接受previousState和action作为参数,返回一个新的nextState。写法如下:
const reducer = (state = defaultState, state) => { |
当应用越来越复杂,考虑将reducer拆分成多个单独的函数,负责独立管理一部分state。使用 **combineReducers(reducers)**可以将多个合并为一个reducer函数,然后就可以对这个 reducer 调用 createStore 方法了。
- UI组件和容器组件
UI组件: 单纯用来展示界面,没有任何状态的傻瓜组件
容器组件: 用来与redux连接,从redux中获取数据作为props
connect:把 React 组件和 Redux 的 store 连接起来。
**connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])**:
connect返回一个函数,它接受一个React组件的构造函数作为连接对象,最终返回连接好的组件构造函数。
const UserContainer = connect(mapStateToProps, mapDispatchToProps)(User) |
- 1.mapStateToProps:**mapStateToProps(state, ownProps) : stateProps **
将容器组件接收的新state映射成UI组件所对应的props,进而传递给子组件的方法。
const mapStateToProps: IMapStateToProps<IUserProps> = |
- 2.mapDispatchToProps:mapDispatchToProps(dispatch, ownProps): dispatchProps
将用户派发的action进行映射,bindActionCreators将 多个action 和 dispatch 组合起来生成mapDispatchToProps 需要生成的内容。
const mapDispatchToProps: IMapDispatchToProps = |
- 3.mergeProps : ** [mergeProps(stateProps, dispatchProps, ownProps): props]**
不管是 stateProps 还是 dispatchProps,都需要和 ownProps 进行merge 之后,才会被赋给组件使用。通常可以不传这个参数,connect 会使用 Object.assign 替代该方法。
- Provider
react-redux除了提供connect, 还提供了另外一个重要对象:Provider,它使 React 组件可被连接。
用法即是将Provider组件包在最外层容器上,如下:
<Provider store={store}> |