【转】Redux教程

本篇文章转自阮一峰老师写的详细教程。

第一部分

1、基本概念和 API

1.1 Store

Store 就是保存数据的地方，你能够把它当作一个容器。整个应用只能有一个 Store。

Redux 提供createStore这个函数，用来生成 Store。

import { createStore } from 'redux'; const store = createStore(fn); 

上面代码中，createStore函数接受另外一个函数做为参数，返回新生成的 Store 对象。

1.2 State

Store对象包含全部数据。若是想获得某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫作 State。

当前时刻的 State，能够经过store.getState()拿到。

import { createStore } from 'redux'; const store = createStore(fn); const state = store.getState(); 

Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。

1.3 Action

State 的变化，会致使 View 的变化。可是，用户接触不到 State，只能接触到 View。因此，State 的变化必须是 View 致使的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其余属性能够自由设置，社区有一个规范能够参考。

const action = { type: 'ADD_TODO', payload: 'Learn Redux' }; 

上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串Learn Redux。

能够这样理解，Action 描述当前发生的事情。改变 State 的惟一办法，就是使用 Action。它会运送数据到 Store。

1.4 Action Creator

View 要发送多少种消息，就会有多少种 Action。若是都手写，会很麻烦。能够定义一个函数来生成 Action，这个函数就叫 Action Creator。

const ADD_TODO = '添加 TODO'; function addTodo(text) { return { type: ADD_TODO, text } } const action = addTodo('Learn Redux'); 

上面代码中，addTodo函数就是一个 Action Creator。

1.5 store.dispatch()

store.dispatch()是 View 发出 Action 的惟一方法。

import { createStore } from 'redux'; const store = createStore(fn); store.dispatch({ type: 'ADD_TODO', payload: 'Learn Redux' }); 

上面代码中，store.dispatch接受一个 Action 对象做为参数，将它发送出去。

结合 Action Creator，这段代码能够改写以下。

store.dispatch(addTodo('Learn Redux')); 

1.6 Reducer

Store 收到 Action 之后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫作 Reducer。

Reducer 是一个函数，它接受 Action 和当前 State 做为参数，返回一个新的 State。

const reducer = function (state, action) {  // ... return new_state; }; 

整个应用的初始状态，能够做为 State 的默认值。下面是一个实际的例子。

const defaultState = 0; const reducer = (state = defaultState, action) => { switch (action.type) { case 'ADD': return state + action.payload; default: return state; } }; const state = reducer(1, { type: 'ADD', payload: 2 }); 

上面代码中，reducer函数收到名为ADD的 Action 之后，就返回一个新的 State，做为加法的计算结果。其余运算的逻辑（好比减法），也能够根据 Action 的不一样来实现。

实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 须要知道 Reducer 函数，作法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

import { createStore } from 'redux'; const store = createStore(reducer); 

上面代码中，createStore接受 Reducer 做为参数，生成一个新的 Store。之后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，获得新的 State。

为何这个函数叫作 Reducer 呢？由于它能够做为数组的reduce方法的参数。请看下面的例子，一系列 Action 对象按照顺序做为一个数组。

const actions = [ { type: 'ADD', payload: 0 }, { type: 'ADD', payload: 1 }, { type: 'ADD', payload: 2 } ]; const total = actions.reduce(reducer, 0); // 3 

上面代码中，数组actions表示依次有三个 Action，分别是加0、加1和加2。数组的reduce方法接受 Reducer 函数做为参数，就能够直接获得最终的状态3。

1.7 纯函数

Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是一样的输入，一定获得一样的输出。

纯函数是函数式编程的概念，必须遵照如下一些约束。

• 不得改写参数
• 不能调用系统 I/O 的API
• 不能调用Date.now()或者Math.random()等不纯的方法，由于每次会获得不同的结果

因为 Reducer 是纯函数，就能够保证一样的State，一定获得一样的 View。但也正由于这一点，Reducer 函数里面不能改变 State，必须返回一个全新的对象，请参考下面的写法。

 // State 是一个对象 function reducer(state, action) { return Object.assign({}, state, { thingToChange });  // 或者 return { ...state, ...newState }; }  // State 是一个数组 function reducer(state, action) { return [...state, newItem]; } 

最好把 State 对象设成只读。你无法改变它，要获得新的 State，惟一办法就是生成一个新对象。这样的好处是，任什么时候候，与某个 View 对应的 State 老是一个不变的对象。

1.8 store.subscribe()

Store 容许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

import { createStore } from 'redux'; const store = createStore(reducer); store.subscribe(listener); 

显然，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。

store.subscribe方法返回一个函数，调用这个函数就能够解除监听。

let unsubscribe = store.subscribe(() => console.log(store.getState()) ); unsubscribe(); 

2、Store 的实现

上一节介绍了 Redux 涉及的基本概念，能够发现 Store 提供了三个方法。

• store.getState()
• store.dispatch()
• store.subscribe()

import { createStore } from 'redux'; let { subscribe, dispatch, getState } = createStore(reducer); 

createStore方法还能够接受第二个参数，表示 State 的最初状态。这一般是服务器给出的。

let store = createStore(todoApp, window.STATE_FROM_SERVER) 

上面代码中，window.STATE_FROM_SERVER就是整个应用的状态初始值。注意，若是提供了这个参数，它会覆盖 Reducer 函数的默认初始值。

下面是createStore方法的一个简单实现，能够了解一下 Store 是怎么生成的。

const createStore = (reducer) => { let state; let listeners = []; const getState = () => state; const dispatch = (action) => { state = reducer(state, action); listeners.forEach(listener => listener()); }; const subscribe = (listener) => { listeners.push(listener); return () => { listeners = listeners.filter(l => l !== listener); } }; dispatch({}); return { getState, dispatch, subscribe }; }; 

3、Reducer 的拆分

Reducer 函数负责生成 State。因为整个应用只有一个 State 对象，包含全部数据，对于大型应用来讲，这个 State 必然十分庞大，致使 Reducer 函数也十分庞大。

请看下面的例子。

const chatReducer = (state = defaultState, action = {}) => { const { type, payload } = action; switch (type) { case ADD_CHAT: return Object.assign({}, state, { chatLog: state.chatLog.concat(payload) }); case CHANGE_STATUS: return Object.assign({}, state, { statusMessage: payload }); case CHANGE_USERNAME: return Object.assign({}, state, { userName: payload }); default: return state; } }; 

上面代码中，三种 Action 分别改变 State 的三个属性。

• ADD_CHAT：chatLog属性
• CHANGE_STATUS：statusMessage属性
• CHANGE_USERNAME：userName属性

这三个属性之间没有联系，这提示咱们能够把 Reducer 函数拆分。不一样的函数负责处理不一样属性，最终把它们合并成一个大的 Reducer 便可。

const chatReducer = (state = defaultState, action = {}) => { return { chatLog: chatLog(state.chatLog, action), statusMessage: statusMessage(state.statusMessage, action), userName: userName(state.userName, action) } }; 

上面代码中，Reducer 函数被拆成了三个小函数，每个负责生成对应的属性。

这样一拆，Reducer 就易读易写多了。并且，这种拆分与 React 应用的结构相吻合：一个 React 根组件由不少子组件构成。这就是说，子组件与子 Reducer 彻底能够对应。

Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，而后用这个方法，将它们合成一个大的 Reducer。

import { combineReducers } from 'redux'; const chatReducer = combineReducers({ chatLog, statusMessage, userName }) export default todoApp; 

上面的代码经过combineReducers方法将三个子 Reducer 合并成一个大的函数。

这种写法有一个前提，就是 State 的属性名必须与子 Reducer 同名。若是不一样名，就要采用下面的写法。

const reducer = combineReducers({ a: doSomethingWithA, b: processB, c: c })  // 等同于 function reducer(state = {}, action) { return { a: doSomethingWithA(state.a, action), b: processB(state.b, action), c: c(state.c, action) } } 

总之，combineReducers()作的就是产生一个总体的 Reducer 函数。该函数根据 State 的 key 去执行相应的子 Reducer，并将返回结果合并成一个大的 State 对象。

下面是combineReducer的简单实现。

const combineReducers = reducers => { return (state = {}, action) => { return Object.keys(reducers).reduce( (nextState, key) => { nextState[key] = reducers[key](state[key], action); return nextState; }, {} ); }; }; 

你能够把全部子 Reducer 放在一个文件里面，而后统一引入。

import { combineReducers } from 'redux' import * as reducers from './reducers' const reducer = combineReducers(reducers) 

4、工做流程

本节对 Redux 的工做流程，作一个梳理。

首先，用户发出 Action。

store.dispatch(action); 

而后，Store 自动调用 Reducer，而且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。

let nextState = todoApp(previousState, action); 

State 一旦有变化，Store 就会调用监听函数。

 // 设置监听函数 store.subscribe(listener); 

listener能够经过store.getState()获得当前状态。若是使用的是 React，这时能够触发从新渲染 View。

function listerner() { let newState = store.getState(); component.setState(newState); } 

5、实例：计数器

下面咱们来看一个最简单的实例。

const Counter = ({ value }) => ( <h1>{value}</h1> ); const render = () => { ReactDOM.render( <Counter value={store.getState()}/>, document.getElementById('root') ); }; store.subscribe(render); render(); 

上面是一个简单的计数器，惟一的做用就是把参数value的值，显示在网页上。Store 的监听函数设置为render，每次 State 的变化都会致使网页从新渲染。

下面加入一点变化，为Counter添加递增和递减的 Action。

 

const Counter = ({ value }) => ( <h1>{value}</h1> <button onClick={onIncrement}>+</button> <button onClick={onDecrement}>-</button> ); const reducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }; const store = createStore(reducer); const render = () => { ReactDOM.render( <Counter value={store.getState()} onIncrement={() => store.dispatch({type: 'INCREMENT'})} onDecrement={() => store.dispatch({type: 'DECREMENT'})} />, document.getElementById('root') ); }; render(); store.subscribe(render); 

第二部分

1、中间件的概念

为了理解中间件，让咱们站在框架做者的角度思考问题：若是要添加功能，你会在哪一个环节添加？

（1）Reducer：纯函数，只承担计算 State 的功能，不合适承担其余功能，也承担不了，由于理论上，纯函数不能进行读写操做。

（2）View：与 State 一一对应，能够看做 State 的视觉层，也不合适承担其余功能。

（3）Action：存放数据的对象，即消息的载体，只能被别人操做，本身不能进行任何操做。

想来想去，只有发送 Action 的这个步骤，即store.dispatch()方法，能够添加功能。举例来讲，要添加日志功能，把 Action 和 State 打印出来，能够对store.dispatch进行以下改造。

let next = store.dispatch; store.dispatch = function dispatchAndLog(action) { console.log('dispatching', action); next(action); console.log('next state', store.getState()); } 

上面代码中，对store.dispatch进行了重定义，在发送 Action 先后添加了打印功能。这就是中间件的雏形。

中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其余功能。

2、中间件的用法

本教程不涉及如何编写中间件，由于经常使用的中间件都有现成的，只要引用别人写好的模块便可。好比，上一节的日志中间件，就有现成的redux-logger模块。这里只介绍怎么使用中间件。

import { applyMiddleware, createStore } from 'redux'; import createLogger from 'redux-logger'; const logger = createLogger(); const store = createStore( reducer, applyMiddleware(logger) ); 

上面代码中，redux-logger提供一个生成器createLogger，能够生成日志中间件logger。而后，将它放在applyMiddleware方法之中，传入createStore方法，就完成了store.dispatch()的功能加强。

这里有两点须要注意：

（1）createStore方法能够接受整个应用的初始状态做为参数，那样的话，applyMiddleware就是第三个参数了。

const store = createStore( reducer, initial_state, applyMiddleware(logger) ); 

（2）中间件的次序有讲究。

const store = createStore( reducer, applyMiddleware(thunk, promise, logger) ); 

上面代码中，applyMiddleware方法的三个参数，就是三个中间件。有的中间件有次序要求，使用前要查一下文档。好比，logger就必定要放在最后，不然输出结果会不正确。

3、applyMiddlewares()

看到这里，你可能会问，applyMiddlewares这个方法究竟是干什么的？

它是 Redux 的原生方法，做用是将全部中间件组成一个数组，依次执行。下面是它的源码。

export default function applyMiddleware(...middlewares) { return (createStore) => (reducer, preloadedState, enhancer) => { var store = createStore(reducer, preloadedState, enhancer); var dispatch = store.dispatch; var chain = []; var middlewareAPI = { getState: store.getState, dispatch: (action) => dispatch(action) }; chain = middlewares.map(middleware => middleware(middlewareAPI)); dispatch = compose(...chain)(store.dispatch); return {...store, dispatch} } } 

上面代码中，全部中间件被放进了一个数组chain，而后嵌套执行，最后执行store.dispatch。能够看到，中间件内部（middlewareAPI）能够拿到getState和dispatch这两个方法。

4、异步操做的基本思路

理解了中间件之后，就能够处理异步操做了。

同步操做只要发出一种 Action 便可，异步操做的差异是它要发出三种 Action。

• 操做发起时的 Action
• 操做成功时的 Action
• 操做失败时的 Action

以向服务器取出数据为例，三种 Action 能够有两种不一样的写法。

 // 写法一：名称相同，参数不一样 { type: 'FETCH_POSTS' } { type: 'FETCH_POSTS', status: 'error', error: 'Oops' } { type: 'FETCH_POSTS', status: 'success', response: { ... } }  // 写法二：名称不一样 { type: 'FETCH_POSTS_REQUEST' } { type: 'FETCH_POSTS_FAILURE', error: 'Oops' } { type: 'FETCH_POSTS_SUCCESS', response: { ... } } 

除了 Action 种类不一样，异步操做的 State 也要进行改造，反映不一样的操做状态。下面是 State 的一个例子。

let state = {  // ... isFetching: true, didInvalidate: true, lastUpdated: 'xxxxxxx' }; 

上面代码中，State 的属性isFetching表示是否在抓取数据。didInvalidate表示数据是否过期，lastUpdated表示上一次更新时间。

如今，整个异步操做的思路就很清楚了。

• 操做开始时，送出一个 Action，触发 State 更新为"正在操做"状态，View 从新渲染
• 操做结束后，再送出一个 Action，触发 State 更新为"操做结束"状态，View 再一次从新渲染

5、redux-thunk 中间件

异步操做至少要送出两个 Action：用户触发第一个 Action，这个跟同步操做同样，没有问题；如何才能在操做结束时，系统自动送出第二个 Action 呢？

奥妙就在 Action Creator 之中。

class AsyncApp extends Component { componentDidMount() { const { dispatch, selectedPost } = this.props dispatch(fetchPosts(selectedPost)) }  // ... 

上面代码是一个异步组件的例子。加载成功后（componentDidMount方法），它送出了（dispatch方法）一个 Action，向服务器要求数据 fetchPosts(selectedSubreddit)。这里的fetchPosts就是 Action Creator。

下面就是fetchPosts的代码，关键之处就在里面。

const fetchPosts = postTitle => (dispatch, getState) => { dispatch(requestPosts(postTitle)); return fetch(`/some/API/${postTitle}.json`) .then(response => response.json()) .then(json => dispatch(receivePosts(postTitle, json))); }; };  // 使用方法一 store.dispatch(fetchPosts('reactjs')); // 使用方法二 store.dispatch(fetchPosts('reactjs')).then(() => console.log(store.getState()) ); 

上面代码中，fetchPosts是一个Action Creator（动做生成器），返回一个函数。这个函数执行后，先发出一个Action（requestPosts(postTitle)），而后进行异步操做。拿到结果后，先将结果转成 JSON 格式，而后再发出一个 Action（ receivePosts(postTitle, json)）。

上面代码中，有几个地方须要注意。

（1）fetchPosts返回了一个函数，而普通的 Action Creator 默认返回一个对象。

（2）返回的函数的参数是dispatch和getState这两个 Redux 方法，普通的 Action Creator 的参数是 Action 的内容。

（3）在返回的函数之中，先发出一个 Action（requestPosts(postTitle)），表示操做开始。

（4）异步操做结束以后，再发出一个 Action（receivePosts(postTitle, json)），表示操做结束。

这样的处理，就解决了自动发送第二个 Action 的问题。可是，又带来了一个新的问题，Action 是由store.dispatch方法发送的。而store.dispatch方法正常状况下，参数只能是对象，不能是函数。

这时，就要使用中间件redux-thunk。

import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import reducer from './reducers';  // Note: this API requires redux@>=3.1.0 const store = createStore( reducer, applyMiddleware(thunk) ); 

上面代码使用redux-thunk中间件，改造store.dispatch，使得后者能够接受函数做为参数。

所以，异步操做的第一种解决方案就是，写出一个返回函数的 Action Creator，而后使用redux-thunk中间件改造store.dispatch。

6、redux-promise 中间件

既然 Action Creator 能够返回函数，固然也能够返回其余值。另外一种异步操做的解决方案，就是让 Action Creator 返回一个 Promise 对象。

这就须要使用redux-promise中间件。

import { createStore, applyMiddleware } from 'redux'; import promiseMiddleware from 'redux-promise'; import reducer from './reducers'; const store = createStore( reducer, applyMiddleware(promiseMiddleware) ); 

这个中间件使得store.dispatch方法能够接受 Promise 对象做为参数。这时，Action Creator 有两种写法。写法一，返回值是一个 Promise 对象。

const fetchPosts = (dispatch, postTitle) => new Promise(function (resolve, reject) { dispatch(requestPosts(postTitle)); return fetch(`/some/API/${postTitle}.json`) .then(response => { type: 'FETCH_POSTS', payload: response.json() }); }); 

写法二，Action 对象的payload属性是一个 Promise 对象。这须要从redux-actions模块引入createAction方法，而且写法也要变成下面这样。

import { createAction } from 'redux-actions'; class AsyncApp extends Component { componentDidMount() { const { dispatch, selectedPost } = this.props  // 发出同步 Action dispatch(requestPosts(selectedPost));  // 发出异步 Action dispatch(createAction( 'FETCH_POSTS', fetch(`/some/API/${postTitle}.json`) .then(response => response.json()) )); } 

上面代码中，第二个dispatch方法发出的是异步 Action，只有等到操做结束，这个 Action 才会实际发出。注意，createAction的第二个参数必须是一个 Promise 对象。

看一下redux-promise的源码，就会明白它内部是怎么操做的。

export default function promiseMiddleware({ dispatch }) { return next => action => { if (!isFSA(action)) { return isPromise(action) ? action.then(dispatch) : next(action); } return isPromise(action.payload) ? action.payload.then( result => dispatch({ ...action, payload: result }), error => { dispatch({ ...action, payload: error, error: true }); return Promise.reject(error); } ) : next(action); }; } 

从上面代码能够看出，若是 Action 自己是一个 Promise，它 resolve 之后的值应该是一个 Action 对象，会被dispatch方法送出（action.then(dispatch)），但 reject 之后不会有任何动做；若是 Action 对象的payload属性是一个 Promise 对象，那么不管 resolve 和 reject，dispatch方法都会发出 Action。

 

第三部分

1、UI 组件

React-Redux 将全部组件分红两大类：UI 组件（presentational component）和容器组件（container component）。

UI 组件有如下几个特征。

• 只负责 UI 的呈现，不带有任何业务逻辑
• 没有状态（即不使用this.state这个变量）
• 全部数据都由参数（this.props）提供
• 不使用任何 Redux 的 API

下面就是一个 UI 组件的例子。

const Title = value => <h1>{value}</h1>; 

由于不含有状态，UI 组件又称为"纯组件"，即它纯函数同样，纯粹由参数决定它的值。

2、容器组件

容器组件的特征偏偏相反。

• 负责管理数据和业务逻辑，不负责 UI 的呈现
• 带有内部状态
• 使用 Redux 的 API

总之，只要记住一句话就能够了：UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

你可能会问，若是一个组件既有 UI 又有业务逻辑，那怎么办？回答是，将它拆分红下面的结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通讯，将数据传给后者，由后者渲染出视图。

React-Redux 规定，全部的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是所有交给它。

3、connect()

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。

import { connect } from 'react-redux' const VisibleTodoList = connect()(TodoList); 

上面代码中，TodoList是 UI 组件，VisibleTodoList就是由 React-Redux 经过connect方法自动生成的容器组件。

可是，由于没有定义业务逻辑，上面这个容器组件毫无心义，只是 UI 组件的一个单纯的包装层。为了定义业务逻辑，须要给出下面两方面的信息。

（1）输入逻辑：外部的数据（即state对象）如何转换为 UI 组件的参数

（2）输出逻辑：用户发出的动做如何变为 Action 对象，从 UI 组件传出去。

所以，connect方法的完整 API 以下。

import { connect } from 'react-redux' const VisibleTodoList = connect( mapStateToProps, mapDispatchToProps )(TodoList) 

上面代码中，connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操做映射成 Action。

4、mapStateToProps()

mapStateToProps是一个函数。它的做用就是像它的名字那样，创建一个从（外部的）state对象到（UI 组件的）props对象的映射关系。

做为函数，mapStateToProps执行后应该返回一个对象，里面的每个键值对就是一个映射。请看下面的例子。

const mapStateToProps = (state) => { return { todos: getVisibleTodos(state.todos, state.visibilityFilter) } } 

上面代码中，mapStateToProps是一个函数，它接受state做为参数，返回一个对象。这个对象有一个todos属性，表明 UI 组件的同名参数，后面的getVisibleTodos也是一个函数，能够从state算出 todos 的值。

下面就是getVisibleTodos的一个例子，用来算出todos。

const getVisibleTodos = (todos, filter) => { switch (filter) { case 'SHOW_ALL': return todos case 'SHOW_COMPLETED': return todos.filter(t => t.completed) case 'SHOW_ACTIVE': return todos.filter(t => !t.completed) default: throw new Error('Unknown filter: ' + filter) } } 

mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，从新计算 UI 组件的参数，从而触发 UI 组件的从新渲染。

mapStateToProps的第一个参数老是state对象，还可使用第二个参数，表明容器组件的props对象。

 // 容器组件的代码 // <FilterLink filter="SHOW_ALL"> // All // </FilterLink> const mapStateToProps = (state, ownProps) => { return { active: ownProps.filter === state.visibilityFilter } } 

使用ownProps做为参数后，若是容器组件的参数发生变化，也会引起 UI 组件从新渲染。

connect方法能够省略mapStateToProps参数，那样的话，UI 组件就不会订阅Store，就是说 Store 的更新不会引发 UI 组件的更新。

5、mapDispatchToProps()

mapDispatchToProps是connect函数的第二个参数，用来创建 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操做应该看成 Action，传给 Store。它能够是一个函数，也能够是一个对象。

若是mapDispatchToProps是一个函数，会获得dispatch和ownProps（容器组件的props对象）两个参数。

const mapDispatchToProps = ( dispatch, ownProps ) => { return { onClick: () => { dispatch({ type: 'SET_VISIBILITY_FILTER', filter: ownProps.filter }); } }; } 

从上面代码能够看到，mapDispatchToProps做为函数，应该返回一个对象，该对象的每一个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。

若是mapDispatchToProps是一个对象，它的每一个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被看成 Action creator ，返回的 Action 会由 Redux 自动发出。举例来讲，上面的mapDispatchToProps写成对象就是下面这样。

const mapDispatchToProps = { onClick: (filter) => { type: 'SET_VISIBILITY_FILTER', filter: filter }; } 

6、<Provider> 组件

connect方法生成容器组件之后，须要让容器组件拿到state对象，才能生成 UI 组件的参数。

一种解决方法是将state对象做为参数，传入容器组件。可是，这样作比较麻烦，尤为是容器组件可能在很深的层级，一级级将state传下去就很麻烦。

React-Redux 提供Provider组件，可让容器组件拿到state。

import { Provider } from 'react-redux' import { createStore } from 'redux' import todoApp from './reducers' import App from './components/App' let store = createStore(todoApp); render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ) 

上面代码中，Provider在根组件外面包了一层，这样一来，App的全部子组件就默认均可以拿到state了。

它的原理是React组件的context属性，请看源码。

class Provider extends Component { getChildContext() { return { store: this.props.store }; } render() { return this.props.children; } } Provider.childContextTypes = { store: React.PropTypes.object } 

上面代码中，store放在了上下文对象context上面。而后，子组件就能够从context拿到store，代码大体以下。

class VisibleTodoList extends Component { componentDidMount() { const { store } = this.context; this.unsubscribe = store.subscribe(() => this.forceUpdate() ); } render() { const props = this.props; const { store } = this.context; const state = store.getState();  // ... } } VisibleTodoList.contextTypes = { store: React.PropTypes.object } 

React-Redux自动生成的容器组件的代码，就相似上面这样，从而拿到store。

7、实例：计数器

咱们来看一个实例。下面是一个计数器组件，它是一个纯的 UI 组件。

class Counter extends Component { render() { const { value, onIncreaseClick } = this.props return ( <div> <span>{value}</span> <button onClick={onIncreaseClick}>Increase</button> </div> ) } } 

上面代码中，这个 UI 组件有两个参数：value和onIncreaseClick。前者须要从state计算获得，后者须要向外发出 Action。

接着，定义value到state的映射，以及onIncreaseClick到dispatch的映射。

function mapStateToProps(state) { return { value: state.count } } function mapDispatchToProps(dispatch) { return { onIncreaseClick: () => dispatch(increaseAction) } }  // Action Creator const increaseAction = { type: 'increase' } 

而后，使用connect方法生成容器组件。

const App = connect( mapStateToProps, mapDispatchToProps )(Counter) 

而后，定义这个组件的 Reducer。

 // Reducer function counter(state = { count: 0 }, action) { const count = state.count switch (action.type) { case 'increase': return { count: count + 1 } default: return state } } 

最后，生成store对象，并使用Provider在根组件外面包一层。

import { loadState, saveState } from './localStorage'; const persistedState = loadState(); const store = createStore( todoApp, persistedState ); store.subscribe(throttle(() => { saveState({ todos: store.getState().todos, }) }, 1000)) ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); 

完整的代码看这里。

8、React-Router 路由库

使用React-Router的项目，与其余项目没有不一样之处，也是使用Provider在Router外面包一层，毕竟Provider的惟一功能就是传入store对象。

const Root = ({ store }) => ( <Provider store={store}> <Router> <Route path="/" component={App} /> </Router> </Provider> ); 

 

【笔记】