9-异步行为

Time: 20200129

既然要讲到异步Action，那就需要明确一个概念，什么是同步Action.

同步Action

动作分发后，就马上触发store的更新，这种Action就是同步Action.

截屏2020-01-29下午4.26.11.png

异步Action

截屏2020-01-29下午4.29.44.png

像这种需要获取数据的动作，就是经典的异步Action，因为数据不会立马就拿到，而是有一定的时间差。

案例

在本案例中，我们使用API端点获取一组用户列表，然后将其存储到store中。

使用Redux时，要想清楚三个要点：

• State ?
• Action ?
• Reducers ?

State

state = {
  loading: true,
  data: [],
  error: ''
}

• loading: 用于展示加载状态
• data: 用户列表
• error: 展示错误信息

Actions

• FETCH_USERS_REQUEST
• FETCH_USERS_SUCCESS
• FETCH_USERS_FAILURE

Reducers

• case: FETCH_USERS_REQUEST

  • ​loading: true

• case: FETCH_USERS_SUCCESS

  • loading: false

  • users: data(from API)

• case: FETCH_USERS_FAILURE

  • loading: fasle
  • error: error(from API)

代码如下

上面展示的是思考步骤，现在我们把它们转化为代码：

const redux = require('redux')
const createStore = redux.createStore

// state
const initialState = {
    loading: false,
    users: [],
    error: ''
}
// action
const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST'
const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS'
const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE'
// action creator
const fetchUsersRequest = () => {
    return {
        type: FETCH_USERS_REQUEST,
        
    }
}

const fetchUsersSuccess = users => {
    return {
        type: FETCH_USERS_SUCCESS,
        payload: users
    }
}
const fetchUsersFailure = error => {
    return {
        type: FETCH_USERS_FAILURE,
        payload: error
    }
}

// reducers
const reducer = (state=initialState, action) => {
    switch (action.type) {
        case FETCH_USERS_REQUEST:
            return {
                ...state, 
                loading: true,
            }
        case FETCH_USERS_SUCCESS:
            return {
                ...state,
                loading: false,
                users: action.payload,
            }
        case FETCH_USERS_FAILURE:
            return {
                ...state, 
                loading: false,
                error: action.payload,
            }
        default:
            return state
    }
}

const store = createStore(reducer)

可以看到，我们先定义好的动作，并假定要传入到action.payload中的数据是从外部加载。

这些数据以参数的方式进入到action，而数据如何获取则需要中间件来完成。

END.