Redux API

Redux API

​ Redux的API非常少。Redux定义了一系列的约定（contract），同时提供少量辅助函数来把这些约定整合到一起。

​ Redux只关心如何管理state。在实际的项目中，还需要使用UI绑定库如react-redux。

顶级暴露的方法：

• createStore(reducer, [preloadedState], [enhancer])
• combineReducers(reducers)
• applyMiddleware(…middlewares)
• bindActionCreators(actionCreators, dispatch)
• compose(…functions)

Store API

• Store
  • getState()
  • dispatch(action)
  • subscribe(listener)
  • getReducer()
  • replaceReducer(nextReducer)

ES6引入：

代码语言：javascript复制

import { createStore } from 'redux';

createStore

代码语言：javascript复制

createStore(reducer, [preloadedState], enchancer)

​ 创建一个Redux store来存放应用中所有的state。应用中有且只有一个store。

参数：

1、reducer(Function)：接收两个参数，分别是当前的state树和要处理的action，返回新的state树。

2、[preloadedState](any)：初始state。

3、enhancer(Function)：Store enhancer是一个组合store creator的高阶函数，返回一个新的强化过的store creator。

返回值：

store：保存了应用所有state的对象。改变state的唯一方法是dispatch action。也可以subscribe 监听state的变化来更新UI。

Store

​ Store就是用来维持应用所有的state树的一个对象。改变store内state的唯一途径是对它dispatch一个action。

​ Store不是类，只是有几个方法的对象。创建store只需要把根部的reducing函数传递给createStore。

Store方法：

• getState()
• dispatch(action)
• subscribe(listener)
• replaceReducer(nextReducer)

---

getState()：

​ 返回当前的state树。它与store的最后一个reducer返回值相同。

​ 返回值 (any)：应用当前的state树。

---

dispatch(action)：

​ 分发action，这是触发state改变的唯一途径。会使用当前getState()的结果和传入的action以同步方式的调用store的reduce函数。返回值会被作为下一个state。从现在开始，这就成为了getState()的返回值，同时变化监听器（change listener）会被触发。

​ 参数：

​ 1、action(Object)：描述应用变化的普通对象。

​ 返回值：

​ (Object)：要dispatch的action。

---

subscribe(listener)：

​ 添加一个变化监听器。每当dispatch action的时候就会执行。state树的一部分可能已经改变，可以使用getState()获取当前的state。

​ 参数：

​ 1、listener(Function)：每当dispatch action的时候都会执行的回调。

​ 返回值：

​ (Function)：一个可以解绑变化监听器的函数。

---

replaceReducer(nextReducer)：

​ 替换当前用来计算state的reducer。

​ 参数：

​ 1、reducer(Function)：store会使用的下一个reducer。

combineReducers

代码语言：javascript复制

combineReducers(reducers)

​ 把一个由多个不同reducer函数作为value的object合并成一个最终的reducer函数，然后就可以对这个reducer调用createStore方法。

​ 合并后的reducer可以调用各个子reducer，并把它们返回的结果合并成为一个state对象。由combineReducers()返回的state对象，将会传入每个reducer返回的state按其传递给combineReducers()时对应的key进行命名。

​ 参数：

​ 1、reducers(Object)：一个对象，它的value对应不同的reducer函数，这些函数后面会被合并成一个。

​ 返回值：

​ (Function)：一个调用reducers对象里所有reducer的reducer，并且构造一个与reducers对象结构相同的state对象。

applyMiddleware

代码语言：javascript复制

applyMiddleware(...middleware)

​ 使用包含自定义功能的middleware来扩展Redux是一种推荐的方式。Middleware可以让你包装store的dispatch方法来达到你想要的目的。

​ 参数：

​ 1、...middleware(arguement)：遵循Redux middleware API的函数。

​ 返回值：

​ (Function)：一个应用了middleware后的store enhancer。这个store enhancer的签名是createStore => createStore，最简单的使用方法就是直接作为最后一个enhancer参数传给createStore()函数。

bindActionCreators

代码语言：javascript复制

bindActionCreators(actionCreators, dispatch)

​ 把一个value为不同action creator的对象，转成拥有同名key的对象。同时使用dispatch对每个action creator进行包装，以便可以直接调用它们。

参数：

​ 1、actionCreator(Function or Object)：一个action creator，或者一个value是action creator的对象。

​ 2、dispatch(Function)：一个由Store提供的dispatch函数。

返回值：

​ (Function or Object)：一个与原对象类似的对象，只不过这个对象的value都是会直接dispatch原action creator返回的结果的函数。如果传入一个单独的函数作为actionCreators，那么返回的结果也是一个单独的函数。

compose

代码语言：javascript复制

compose(...functions)

​ 从左到右来组合多个函数。

参数：

​ 1、(arguement)：需要合成的多个函数。

返回值：

​ (Function)：从左到右把接收到的函数组合成的最终的函数。

React-Redux API

安装

​ Redux和React之间没有关系，Redux支持React，需要安装react-redux。

代码语言：javascript复制

npm install --save react-redux

API

代码语言：javascript复制

<Provider store>

​ <Provider store>使组件层级中的connect()方法都能获得Redux store。正常情况下，根组件应该嵌套在<Provider store>中才能使用connect()方法。

属性：

• store(Redux Store)：应用程序中唯一的Redux store对象。
• children(ReactElement)：组件层级的根组件。

---

代码语言：javascript复制

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

​ 连接React组件和Redux Store。连接操作不会改变原来的组件类。反而返回一个新的已与Redux Store连接的组件类。

参数：

• [ mapStateToProps(state, [ownProps]): stateProps ](Function)：如果定义该参数，组件将会监听Redux Store的变化。
• [ mapDispatchRoProps(dispatch, [ownProps]: dispatchProps) ](Object or Function)：如果传递的是一个对象，那么每个定义在该对象的函数都会被当做Redux action creator，对象所定义的方法名将作为属性名；每个方法将返回一个新的函数，函数中的dispatch方法会将action creator的返回值作为参数执行。这些属性会被合并到组件的props中。
• [ mergeProps(stateProps, dispatchProps, ownProps): props ](Function)：如果指定了这个参数，mapStateToProps()与mapDispatchToProps()的执行结果和组件自身的props将传入到这个回调函数中。该回调函数返回的对象将作为props传递到被包装的组件中。
• [ options ](Object)：如果指定这个参数，可以定制connector的行为。
  • [ pure = ture ](boolean)：如果为true，connector将执行shouldComponentUpdate并且浅对比mergeProps的结果，避免不必要的更新。
  • [ withRef = false ](boolean)：如果为true，connector会保存一个队被包装组件实例的引用，该引用通过getWrappedInstance()方法获得。

返回值：

​ 根据配置信息，返回一个注入了state和action creator的React组件。

静态属性：

​ WrappedComponent(component)：传递到connect()函数的原始组件类。

静态方法：

​ getWrappedComponent(): ReactComponent

仅当connect()函数的第四个参数options设置了{ withRef: true }才返回被包装的组件实例。

redux mapreduce 编程算法 react api

0 人点赞