Redux使用总结
Redux简介：redux是一个用于解决组件间状态共享问题的，集中管理状态的应用数据流框架
流程：组件调用store的dispatch，触发actionCreator，携带store中的旧state与action(action.type,action.payload)流入reducer，返回新的state，用户组件通过getState方法来获取新的状态
Redux注意事项
1、单一数据流：整个应用的state被存储在一颗object tree中，并且它只存在于唯一的一个store中；
2、state是只读的：state作为redux的状态存储,改变state的方法就是通过触发action，流入reducer，来返回新的状态；
3、Reducer是一个纯函数：它接收一个对象，action和state，返回一个新的state；纯函数意义在于返回值只依赖于输入值，而不会发生意外操作。
4、redux是同步的，如果想在action里进行异步ajax请求，可以使用react中间件如redux-thunk。中间件作为action和state之间的桥梁，封装dispatch，让我们可以在action中封装对应承载了异步ajax操作的函数。实现redux中的数据请求等功能。
Action
Action是把数据从应用传到store的有效载荷。它是store数据的唯一来源。
一般来说你会通过store.dispatch()来将action传入到store
Reducer
Reducers指定了应用状态的变化是如何响应action并发送到store的，
记住action只是描述了有state更新的发生，而没有描述应用如何更新state
Store
Store维持应用的状态，提供getState方法来让应用（组件)获取state，
提供了dispatch方法来更新state，subscribe(listener)来注册监听器
使用实践
1、组件中：通过@connect连接redux：
@connect( ({ReducerName}) => ({ReducerName}) ,
(dispatch)=>({dispatchRename(data){
//若在action使用store.dispatch提交动作，则此处可不写，
而是组件中直接调用action方法
dispatch(actionName(data))
},
})
)
2、Store区域，用redux-thunk做中间件，使用createStore创建store并向外暴露store
3、组件中使用方法、属性：通过connect连接redux,
调用属性如this.props.reducerName.属性；
调用方法如this.props.actionName.方法名；（若在action中
使用getStore获取store实例，并使用store.dispatch写法，
则此处可以直接调用action中封装的方法而加'this.props')
4、action中对于dispatch的封装，(实例：上拉加载功能)
export const getFeedbackList = (page=0,page_num=10)=>{
const store = getStore();
setLoading(true)//开始上拉加载
get('API',{param},true)
.then((res)=>{
const {...} = res;
if(code != 200){...;return}
store.dispatch({
type: ABC,
data:{
aaa: data.aaa,
bbb: data.bbb
}
})
setLoading(false)
}).catch(()=>{
setLoading(false)
})
}
5、Reducer状态处理：
export default function feedbackList (state = INITIAL_STATE,action={}){
const {type ,data={}} = action
const {...} = data
if(type === TYPE1){
return {...state, aaa:新的aaa, bbb:新的bbb}
}
else if (type === TYPE2){...}
else {return state}
}
6、应用中触发action
handleScroll = ()=>{
const {...} = this.props.reducerName
const {...} = this.state
//进行触发的一些判断操作如是否还有数据、节流等（略）
this.props.actionName(data) //触发上拉加载的action
}
而是组件中直接调用action方法 dispatch(actionName(data)) }, }) ) 2、Store区域，用redux-thunk做中间件，使用createStore创建store并向外暴露store 3、组件中使用方法、属性：通过connect连接redux, 调用属性如this.props.reducerName.属性； 调用方法如this.props.actionName.方法名；（若在action中 使用getStore获取store实例，并使用store.dispatch写法， 则此处可以直接调用action中封装的方法而加'this.props') 4、action中对于dispatch的封装，(实例：上拉加载功能) export const getFeedbackList = (page=0,page_num=10)=>{ const store = getStore(); setLoading(true)//开始上拉加载 get('API',{param},true) .then((res)=>{ const {...} = res; if(code != 200){...;return} store.dispatch({ type: ABC, data:{ aaa: data.aaa, bbb: data.bbb } }) setLoading(false) }).catch(()=>{ setLoading(false) }) } 5、Reducer状态处理： export default function feedbackList (state = INITIAL_STATE,action={}){ const {type ,data={}} = action const {...} = data if(type === TYPE1){ return {...state, aaa:新的aaa, bbb:新的bbb} } else if (type === TYPE2){...} else {return state} } 6、应用中触发action handleScroll = ()=>{ const {...} = this.props.reducerName const {...} = this.state //进行触发的一些判断操作如是否还有数据、节流等（略） this.props.actionName(data) //触发上拉加载的action }