20-异步动作在React Redux中的使用

Time: 20200130

React项目中使用异步动作

关于同步动作和异步动作的区别：

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

到目前为止，如何把redux用起来已经可以轻车熟路了，现在再回顾总结，并用一个新的例子来解读一下。

先明确一点，Redux下，store是唯一的。

我们把所有Redux相关的东西都放在/redux目录下。

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

其中，index.js负责把Action Creator导出来。

这样，在组件中，就可以通过：import { buyIceCream } from '../redux'导入需要的Action Creator了。

Action Creator的作用

从构建Action Creator的角度出发，它需要承接接收数据，并将数据保存在action.payload中的作用。

对外，将用在组件中，根据不同的需求来dispatch()。

现在我们看看获取用户列表的案例。

在/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接收数据，通过参数的方式接收，然后存到action对象中
 * reducer不用操心数据的问题，只要定义好逻辑即可
 * 即，reducer是纯函数
 */

// 三个Action Creator函数，均为同步Action
export  const fetchUserRequest = () => {
    return {
        type: FETCH_USER_REQUEST
    }
}
// 这些参数需要通过外部传入
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 }

这些步骤是对内设定好，然后现在把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;

现在我们来通过UserContainer.js组件来承接对外交互，并将获取的数据存储到store。

本文主要复习如何设置Action Types --> Action Creator --> Reducer --> rootReducer --> store.

下一节我们讲如何使用到组件中。

END.