redux-thunk
redux-logger
redux-actions
redux-promise
redux-promise-middleware
redux-thunk
增强dispatch功能，可以dispatch(action)，在action里面可以做一写异步的操作，比如延迟、fetch请求等，然后在action里面合适地方进行dispatch。
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
例子1：延迟5秒后消失组件
action.js
// 控制首页Hub的状态
export const ACTION_CHANGE_HUB_STATE = (value)=>{
return {
type: Action.ACTION_CHANGE_HUB_STATE,
payLoad: value
}
};
// 延迟5秒后 隐藏/显示 首页 hub redux-thunk的功能，return的是一个函数，不是对象
export const ACTION_DELAY_CONTROL_HUB = (value)=>{
return (dispatch, getState)=>{
setTimeout(()=>{
// 5秒后，发送一个新的dispatch，改变状态
dispatch(ACTION_CHANGE_HUB_STATE(value))
}, 5000)
}
};
home.js
componentDidMount() {
this.props.controlHub(false)
}
render(){
{
this.props.isShowHub ? <TouchableOpacity style={styles.button} >
<Text style={styles.buttonText}>延迟5秒后自动消失 </Text>
</TouchableOpacity> : null
}
function mapStateToProps(state) {
return {
isShowHub: state.homeRedux.isShowHub
}
}
function mapDispatchToProps(dispatch) {
return {
controlHub: (value)=>{
dispatch(ACTION_DELAY_CONTROL_HUB(value))
}
}
}
例2：在action里面进行网络请求
写法1：直接写在 home.js 中
componentDidMount() {
this.props.controlHub(false);
this.props.httpRequest('url', this.httpCallBack);
this.props.httpRequest1('url')
}
// 回调
httpCallBack(data){
console.log('httpCallBack: ', data);
}
function mapDispatchToProps(dispatch) {
return {
controlHub: (value)=>{
dispatch(ACTION_DELAY_CONTROL_HUB(value))
},
// 可以直接传递回调，在 当前js文件中进行数据的处理
httpRequest: (url,callBack)=>{
dispatch((dispatch, getState)=>{
fetch(url)
.then(response=>{
return response.json()
})
.then(responseData=>{
console.log(responseData);
// 异步请求接口完成，发送dispatch 保存用户信息
dispatch(ACTION_SAVE_USER_INFO(responseData))
// 回调，在js中处理数据
callBack(responseData)
})
.catch(error=>{
console.log('网络请求错误:',error)
// 回调，在js中处理数据
callBack(error)
})
})
},
httpRequest1: (value)=>{
dispatch(ACTION_DELAY_HTTP_REQUEST(value))
}
}
}
写法2：写在 action.js 中
// 异步 网络请求
export const ACTION_DELAY_HTTP_REQUEST = (url)=>{
return (dispatch, getState)=>{
fetch(url)
.then(response=>{
return response.json()
})
.then(responseData=>{
console.log(responseData);
// 异步请求接口完成，发送dispatch 保存用户信息
dispatch(ACTION_SAVE_USER_INFO(responseData))
})
.catch(error=>{
console.log('网络请求错误1:',error)
})
}
}
redux-logger
redux-logger 源码简单分析
参考文章
❗️在执行 next(action)前，先得到当前的redux存的值
const prevState = transformer(getState());
❗️执行 next(action)
const returnValue = next(action);
❗️在执行 next(action)后，先得到当前的redux存的值
const nextState = transformer(getState());
❗️得到当前的action
const formattedAction = actionTransformer(action);
❗️返回 next(action)
return returnValue;
redux-actions
这个不是中间件，只是更加方便的去声明action和处理redux
声明action
原来的方式
export const ACTION_DELAY_CONTROL_HUB = (value)=>{
return {
type: Action.ACTION_DELAY_CONTROL_HUB, // type
payload: value // 参数
}
};
redux-actions的声明方式
// 只需传入一个type，参数在调用的时候传入即可，这里不需要特意的传入参数。
// 因为 `arguments`， arguments了解一下
// redux里面的参数是 payload
export const ACTION_DELAY_CONTROL_HUB = createAction(Action.ACTION_DELAY_CONTROL_HUB)
调用
dispatch(ACTION_DELAY_CONTROL_HUB(value))
redux-promise
action 的 payload 可以传入promise对象
❗️在promise没有结束之前，是没办法进行操作的
action.js
// 异步 网络请求 redux-promise
export const ACTION_DELAY_HTTP_REQUEST_PROMISE = (url)=>{
return {
type: Action.ACTION_DISPATCH_PROMISE,
payload: fetch(url)
}
};
redux.js
export default (state = initState, action)=>{
switch (action.type){
case Action.ACTION_DISPATCH_PROMISE:
return Object.assign({},state, {
result: String(action.payload)
});
break;
default:
return state;
}
}
redux-promise-middleware
大致和redux-promise一样，但是开放出了3个action，
_PENDING ： 请求中
_FULFILLED：请求成功
_REJECTED： 请求失败
创建store的时候
promiseMiddleware()
applyMiddleware(thunk, promiseMiddleware(), promise, logger)(createStore);
❗️❗️❗️声明action的名字就要注意了，和之前得不一样了
actionType_PENDING actionType_FULFILLED actionType_REJECTED
actionType.js
// redux-promise-middleware
export const ACTION_DISPATCH_PROMISE_MIDDLEWARE = 'ACTION_DISPATCH_PROMISE_MIDDLEWARE',
ACTION_DISPATCH_PROMISE_MIDDLEWARE_PENDING = 'ACTION_DISPATCH_PROMISE_MIDDLEWARE_PENDING',
ACTION_DISPATCH_PROMISE_MIDDLEWARE_FULFILLED = 'ACTION_DISPATCH_PROMISE_MIDDLEWARE_FULFILLED',
ACTION_DISPATCH_PROMISE_MIDDLEWARE_REJECTED = 'ACTION_DISPATCH_PROMISE_MIDDLEWARE_REJECTED';
action.js
export const ACTION_DELAY_HTTP_REQUEST_PROMISE_MIDDLEWARE = (url)=>{
return {
type: Action.ACTION_DISPATCH_PROMISE_MIDDLEWARE,
payload: {
promise: fetch(url),
data: url
}
// 或者
payload： fetch(url)
}
}
redux.js
export default (state = initState, action)=>{
switch (action.type){
case Action.ACTION_DISPATCH_PROMISE:
return Object.assign({},state, {
result: String(action.payload)
});
break;
case Action.ACTION_DISPATCH_PROMISE_MIDDLEWARE_PENDING:
return Object.assign({},state, {
middlewareResult: '请求中'
});
break;
case Action.ACTION_DISPATCH_PROMISE_MIDDLEWARE_FULFILLED:
return Object.assign({},state, {
middlewareResult: '请求成功'
});
break;
case Action.ACTION_DISPATCH_PROMISE_MIDDLEWARE_REJECTED:
return Object.assign({},state, {
middlewareResult:'请求失败'
});
break;
default:
return state;
}
}
网友评论