Time: 20200130

React項(xiàng)目中使用異步動作

關(guān)于同步動作和異步動作的區(qū)別：

截屏2020-01-30下午3.24.21.png

到目前為止，如何把redux用起來已經(jīng)可以輕車熟路了，現(xiàn)在再回顧總結(jié)，并用一個新的例子來解讀一下。

先明確一點(diǎn)，Redux下，store是唯一的。

我們把所有Redux相關(guān)的東西都放在/redux目錄下。

截屏2020-01-30下午3.48.29.png

其中，index.js負(fù)責(zé)把Action Creator導(dǎo)出來。

這樣，在組件中，就可以通過：import { buyIceCream } from '../redux'導(dǎo)入需要的Action Creator了。

Action Creator的作用

從構(gòu)建Action Creator的角度出發(fā)，它需要承接接收數(shù)據(jù)，并將數(shù)據(jù)保存在action.payload中的作用。

對外，將用在組件中，根據(jù)不同的需求來dispatch()。

現(xiàn)在我們看看獲取用戶列表的案例。

在/redux下新建一個/user目錄。

userTypes.js

export const FETCH_USER_REQUEST = 'FETCH_USER_REQUEST'
export const FETCH_USER_SUCCESS = 'FETCH_USER_SUCCESS'
export const FETCH_USER_FAILURE = 'FETCH_USER_FAILURE'

userActions.js

import 
{ FETCH_USER_REQUEST, 
  FETCH_USER_SUCCESS, 
  FETCH_USER_FAILURE
} 
from './userTypes'

/**
 * Action Creator接收數(shù)據(jù)，通過參數(shù)的方式接收，然后存到action對象中
 * reducer不用操心數(shù)據(jù)的問題，只要定義好邏輯即可
 * 即，reducer是純函數(shù)
 */

// 三個Action Creator函數(shù)，均為同步Action
export  const fetchUserRequest = () => {
    return {
        type: FETCH_USER_REQUEST
    }
}
// 這些參數(shù)需要通過外部傳入
export const fetchUserSuccess = users => {
    return {
        type: FETCH_USER_SUCCESS,
        payload: users
    }
}
export const fetchUserFailure = error => {
    return {
        type: FETCH_USER_FAILURE,
        payload: error
    }
}

userReducer.js

import {
    FETCH_USER_REQUEST,
    FETCH_USER_SUCCESS,
    FETCH_USER_FAILURE
}
from './userTypes'

const initialState = {
    loading: false,
    users: [],
    error: ''
}

const fetchUserReducer = (state=initialState, action) => {
    switch (action.type) {
        case FETCH_USER_REQUEST:
            return {
                ...state, 
                loading: true
            }
        case FETCH_USER_SUCCESS:
            return {
                ...state, 
                loading: false, 
                users: action.payload
            }
        case FETCH_USER_FAILURE:
            return {
                ...state,
                loading: false,
                error: action.payload
            }
        default:
            return state
    }
}

export { fetchUserReducer }

這些步驟是對內(nèi)設(shè)定好，然后現(xiàn)在把fetchUserReducer綜合到rootReducer。

rootReducer.js

import { combineReducers } from 'redux'
import cakeReducer from './cake/cakeReducer'
import iceCreamReducer from './iceCream/iceCreamReducer'
import { fetchUserReducer } from './user/userReducer'

export const rootReducer = combineReducers({
    cake: cakeReducer, 
    iceCream: iceCreamReducer,
    user: fetchUserReducer,
})

store.js

import { createStore, applyMiddleware } from 'redux'
import { rootReducer } from './rootReducer'
import logger from 'redux-logger'
import { composeWithDevTools } from 'redux-devtools-extension'

const store = createStore(rootReducer, 
    composeWithDevTools( applyMiddleware(logger)
    )
 )

export default store

App.js

這里使用store，使用方式如下：

import React from 'react';
import './App.css';
import { Provider } from 'react-redux'
import store from './redux/store'

function App() {
  return (
    <Provider store={store}>
      <div className="App">
                
      </div>
    </Provider>
  );
}

export default App;

現(xiàn)在我們來通過UserContainer.js組件來承接對外交互，并將獲取的數(shù)據(jù)存儲到store。

本文主要復(fù)習(xí)如何設(shè)置Action Types --> Action Creator --> Reducer --> rootReducer --> store.

下一節(jié)我們講如何使用到組件中。

END.