redux-promise

redux-promise中间件的应用有两种情况： 1,当dispatch收到的是一个Pomise实例，会dispatch掉resolve的值，而对reject不做处理

import { useEffect, useState } from 'react';
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
const initstate = {
  num: 0,
};

const reducers = (state = initstate, action) => {
  switch (action.type) {
    case 'add':
      return { ...state, num: state.num + action.payload };
    default:
      return state;
  }
};

const store = createStore(reducers, applyMiddleware(promiseMiddleware));

function App() {
  const [num, setNum] = useState(store.getState().num);

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setNum(store.getState().num);
    });

    //组件销毁的时候同时取消订阅函数，避免多次订阅
    return () => {
      unsubscribe();
    };
  }, []);
  const getAsync = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          type: 'add',
          payload: 5,
        });
      }, 100);
    });
  };

  return (
    <>
      {num}
      <button
        onClick={() => {
          store.dispatch(getAsync());
        }}
      >
        增加
      </button>
    </>
  );
}

export default App;

2,当payload传递的是一个promise的时候，会dispatch这个promise resolve的值。reject不做处理。

 const getAsync = () => {
    return {
      type: 'add',
      payload: new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(100);
        }, 100);
      }),
    };
  };