Redux 入门教程—17异步与 promise

秒速五厘米 2021-10-23 10:27 303阅读 0赞

[https://github.com/pburtchaell/redux-promise-middleware/blob/master/docs/introduction.md][https_github.com_pburtchaell_redux-promise-middleware_blob_master_docs_introduction.md]

[http://es6.ruanyifeng.com/\#docs/promise][http_es6.ruanyifeng.com_docs_promise]

[http://liubin.org/promises-book/][http_liubin.org_promises-book]

[https://segmentfault.com/a/1190000007248878][https_segmentfault.com_a_1190000007248878]

**actions/index.js**

import axios from 'axios';
    import { INCREMENT, DECREMENT } from '../constants';
    import { FETCH_USER_SUCCESS, FETCH_USER_REQUEST, FETCH_USER_FAILURE } from '../constants';
    import { LOAD_USER } from '../constants';
    
    export const increment = () => {
      // return dispatch => {
      //   setTimeout(() => {
      //     dispatch({
      //       type: INCREMENT
      //     });
      //   }, 2000);
      // };
      return {
        type: INCREMENT,
        payload: new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve("rails365");
          });
        })
      }
    };
    
    export const decrement = () => {
      return {
        type: DECREMENT
      }
    };
    
    export const get_user = () => {
      // return dispatch => {
      //   dispatch(fetch_user_request())
      //   axios.get("https://randomuser.me/api/")
      //     .then(res => {
      //       dispatch(fetch_user(res.data.results[0]));
      //     })
      //     .catch(error => {
      //       dispatch(fetch_user_failure(error.response.data));
      //     })
      // };
      return {
        type: LOAD_USER,
        // payload: axios.get("https://randomuser.me/api/")
        payload: {
          promise: axios.get("https://randomuser.me/api/")
        }
      };
    };
    
    export const fetch_user_failure = (error) => {
      return {
        type: FETCH_USER_FAILURE,
        error
      };
    };
    
    export const fetch_user = (user) => {
      return {
        type: FETCH_USER_SUCCESS,
        user
      }
    };
    
    export const fetch_user_request = () => {
      return {
        type: FETCH_USER_REQUEST
      }
    };

**reducers/user.js**

import { LOAD_USER_FULFILLED, LOAD_USER_PENDING, LOAD_USER_REJECTED } from '../constants';
    
    const initialState = {
      isFetching: false,
      error: null,
      user: {}
    };
    
    const user = (state = initialState, action = {}) => {
      switch(action.type) {
        case LOAD_USER_FULFILLED:
          return {
            isFetching: false,
            error: null,
            user: action.payload.data.results[0]
          };
        case LOAD_USER_PENDING:
          return {
            isFetching: true,
            error: null,
            user: {}
          }
        case LOAD_USER_REJECTED:
          return {
            isFetching: false,
            error: action.payload.response.data,
            user: {}
          };
        default: return state;
      }
    }
    
    export default user;

[https_github.com_pburtchaell_redux-promise-middleware_blob_master_docs_introduction.md]: https://github.com/pburtchaell/redux-promise-middleware/blob/master/docs/introduction.md
[http_es6.ruanyifeng.com_docs_promise]: http://es6.ruanyifeng.com/#docs/promise
[http_liubin.org_promises-book]: http://liubin.org/promises-book/
[https_segmentfault.com_a_1190000007248878]: https://segmentfault.com/a/1190000007248878