study / Redux相关概念及API整理

作者 GaoGe 日期 2019-04-23
study / Redux相关概念及API整理

“如果你不知道是否需要使用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 => {
return {
age,
type: UPDATE_AGE
};
};

另一种是用来发请求、加载数据的函数,该函数可以返回一个方法,也可以是一个promise对象。如下:

const getInfo: () => Promise<T> = () => {
return new Promise(resolve => resolve());
};

- reducer

reducer是一个纯函数,接受previousState和action作为参数,返回一个新的nextState。写法如下:

const reducer = (state = defaultState, state) => {
// ...
return new state;
}
//defaultState 为初始状态,默认值

当应用越来越复杂,考虑将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> =
({ user }) => ({ ...user });
  • 2.mapDispatchToPropsmapDispatchToProps(dispatch, ownProps): dispatchProps
    将用户派发的action进行映射,bindActionCreators将 多个action 和 dispatch 组合起来生成mapDispatchToProps 需要生成的内容。
const mapDispatchToProps: IMapDispatchToProps =
(dispatch) => {
return bindActionCreators({
...UserActionCreator,
}, dispatch);
};
  • 3.mergeProps : ** [mergeProps(stateProps, dispatchProps, ownProps): props]**
    不管是 stateProps 还是 dispatchProps,都需要和 ownProps 进行merge 之后,才会被赋给组件使用。通常可以不传这个参数,connect 会使用 Object.assign 替代该方法。

- Provider

react-redux除了提供connect, 还提供了另外一个重要对象:Provider,它使 React 组件可被连接。
用法即是将Provider组件包在最外层容器上,如下:

<Provider store={store}>
<User/>
</Provider>