Action 创建函数
编写
function increment(){
return { type: 'INCREMENT' }
}
发起
store.dispatch( increment() )
如果不想每次都 store.dispatch 发起 action.
const increment = () => dispatch( increment() )
_使用 react-redux 将 action 创建函数绑定到 React 组件上时, bindActionCreators() 方法自动将多个 action 创建函数封装成可以直接调用的普通函数 _
意义
Action 创建函数更大的意义在于封装逻辑, 而不是创建 action 对象, 比如说可以在里面添加一些判断逻辑(只允许奇数相加等). 使用 action 创建函数封装逻辑是 react 与 redux 配合的最佳实践. 当所有逻辑被转移到 redux后, react 就只负责渲染界面, 并发起 action.
中间件会让 action 创建函数返回更多的格式( 函数 ), 增强 action 创建函数的功能, 并让它处理负责逻辑.
Redux Thunk 中间件
redux thunk 中间件可以让 action 创建函数先不返回 action 对象, 而是返回一个函数.
通过这个函数延迟 dispatch 或 某些情况下才 dispatch. 这个内部函数接受 store 的两个方法 dispatch 和 getState 作为参数.
function incrementIfOdd(){
return ( dispatch, getState() ) => {
const value = getState();
if (value % 2 === 0){
return;
}
dispatch( increment() );
}
}
要使用, 先激活
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const store = createStore( counter, applyMiddleware( thunk ) );
function increment(){
return { type: 'INCREMENT' }
}
function incrementIfOdd(){
return ( dispatch, getState() ) => {
const value = getState();
if (value % 2 === 0){
return;
}
dispatch( increment() );
}
}
function incrementAsync(){
return ( dispatch ) => {
setTimeout( ()=>{
dispatch( increment() ) ;
} )
}
}
// 发起action, 上面三个都是 action 创建函数
store.dispatch( increment() )
store.dispatch( incrementIfOdd() )
store.dispatch( incrementAsync() )
