什么是redux?redux概念及应用

redux是什么?

1.redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库)
2.它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用
3.作用: 集中式管理 react 应用中多个组件共享的状态

redux工作流程

什么情况下使用redux?

1.总体原则: 能不用就不用, 如果不用比较吃力才考虑使用
2.某个组件的状态，需要共享
3.某个状态需要在任何地方都可以拿到
4.一个组件需要改变全局状态
5.一个组件需要改变另一个组件的状态

redux核心api

1.createStore()  作用:创建包含指定 reducer 的 store 对象
使用:
import {createStore} from 'redux' 
import reducer from './reducer' 
const store = createStore(reducer)

2.store对象:redux 库最核心的管理对象(包括state和reducer)
核心方法:
	getState() dispatch(action) subscribe(listener)
使用:
store.getState() 
store.dispatch({type:'INCREMENT', number})
store.subscribe(render)

3.applyMiddleWare中间件  
作用:应用上基于 redux 的中间件(插件库)
使用:
	import {createStore, applyMiddleware} from 'redux' 
	import thunk from 'redux-thunk' // redux 异步中间件 
	const store = createStore( counter, applyMiddleware(thunk) // 应用上异步中间件 )


4.combineReducers()
作用:合并多个reducer函数
使用:
export default combineReducers({ user, chatUser))

redux三个核心概念

1.action  标识要执行行为的对象
属性:
type:标识属性, 值为字符串, 唯一, 必要属性
xxx: 数据属性, 值类型任意, 可选属性
使用: const action = { type: 'INCREMENT', data: 2 }

2.reducer(可以理解为仓库管理员)  返回一个新的状态
使用:
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.store 将 state,action 与 reducer 联系在一起的对象
使用:
import {createStore} from 'redux' 
import reducer from './reducer' 
const store = createStore(reducer)

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