redux的工作流程及其使用（详解）

redux的理解

redux是什么？

1.redux是一个专门做状态管理的js库（而不是react库）。
2.可以用在react, angular, vue等项目中, 但基本与react配合使用。
3.作用: 集中式管理react应用中多个组件共享的状态。
中文文档 http://www.redux.org.cn/

redux的工作流程

什么情况下才能使用redux

1.能不用就不用，不用会很麻烦就是用
2.很多状态需要共享
3.组件需要改变全局的状态，组件需要改变另一个组件（这个和pubsubjs作用 相似）

redux的核心API

（一）. createStore()

1. 作用:
   创建包含指定reducer的store对象
2. 编码:

import {createStore} from 'redux'
import counter from './reducers/counter'
const store = createStore(counter)

（二）.store对象

store对象

1. 作用:
   redux库最核心的管理对象
2. 它内部维护着:
   state
   reducer
3. 核心方法:

	getState()
	dispatch(action)
	subscribe(listener)

4. 编码:

	store.getState()
	store.dispatch({type:'INCREMENT', number})
	store.subscribe(render)

（三）. applyMiddleware()

1. 作用:
   应用上基于redux的中间件(插件库)
2. 编码:

import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'  // redux异步中间件
const store = createStore(
  counter,
  applyMiddleware(thunk) // 应用上异步中间件
)

(四). combineReducers()

1. 作用:
   合并多个reducer函数
2. 编码:

export default combineReducers({
  user,
  chatUser,
  chat
})

redux的三个核心概念

1.action

1. 标识要执行行为的对象
2. 包含2个方面的属性
   a. type: 标识属性, 值为字符串, 唯一, 必要属性
   b. xxx: 数据属性, 值类型任意, 可选属性
3. 例子:

	const action = {
			type: 'INCREMENT',
			data: 2
		}

4. Action Creator(创建Action的工厂函数)

	const increment = (number) => ({type: 'INCREMENT', data: number})

(二). reducer

1. 根据老的state和action, 产生新的state的纯函数
2. 样例

	export default function counter(state = 0, action) {
		  switch (action.type) {
		    case 'INCREMENT':
		      return state + action.data
		    case 'DECREMENT':
		      return state - action.data
		    default:
		      return state
		  }
		}

3.注意
a. 返回一个新的状态
b. 不要修改原来的状态

(三).store

1. 将state,action与reducer联系在一起的对象
2. 如何得到此对象?

	import {createStore} from 'redux'
		import reducer from './reducers'
		const store = createStore(reducer)

3. 此对象的功能?
   getState(): 得到state
   dispatch(action): 分发action, 触发reducer调用, 产生新的state
   subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

下载依赖包

npm install --save redux