Action 创建函数 和 中间件

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() )