Redux概覽

簡介

• Redux 是一個有用的架構
• Redux 的適用場景：多交互、多數據源

工做流程圖

action

用戶請求

//發出一個action
import { createStore } from 'redux';
const store = createStore(fn);

//其中的type屬性是必須的，表示 Action 的名稱。其餘屬性能夠自由設置
const action = {
  type: 'ADD_TODO',
  data: 'Learn Redux'
};

store.dispatch(action);

Reducer

狀態機
Reducer 是一個函數，它接受 Action 和當前 State 做爲參數，返回一個新的 State。
Reducer 是純函數，就能夠保證一樣的State，一定獲得一樣的 View。但也正由於這一點，Reducer 函數裏面不能改變 State，必須返回一個全新的對象

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return {
          ...state,
          data: action.data
      }
    default: 
      return state;
  }
};

Recucer的拆分

//index
import {combineReducers} from 'redux';
import proIndex from './proIndex';
import product from './product'
export default combineReducers({
    proIndex,
    product,
});

//product
import actions from '../action/index'
import {getDocMenu} from "../action/user/product";

const {
    GET_PRODUCT_DOCUMENT_SUCCESS
} = actions;

export default (state = {},action) =>{
    switch (action.type) {
        case GET_PRODUCT_DOCUMENT_SUCCESS:
            return{
                ...state,
                getDocMenu: action.data,
            }
        default:
            return state;
    }
}

//proIndex
import actions from '../action/index';

const {
    GET_SERVICE_CLASSIFICATION_SUCCESS,
    GET_SERVICE_SUBJECT_SUCCESS,
} = actions;

export default (state = {},action) => {
    switch (action.type) {
        case GET_SERVICE_CLASSIFICATION_SUCCESS:
            return {
                ...state,
                getServiceClass: action.data,
            };
        case GET_SERVICE_SUBJECT_SUCCESS:
            return {
                ...state,
                getServiceSubject: action.data,
            };
        default:
            return state;
    }
};

store

數據倉庫

import { createStore } from 'redux'
import todoApp from './reducers'
//建立store倉庫
const store = createStore(todoApp)
//createStore方法還能夠接受第二個參數()，表示 State 的最初狀態。這一般是服務器給出的(window.STATE_FROM_SERVER就是整個應用的狀態初始值)
const store = createStore(todoApp, window.STATE_FROM_SERVER)

//引入action
import {
  addTodo,
  toggleTodo,
  setVisibilityFilter,
  VisibilityFilters
} from './actions'

//打印當前狀態
console.log(store.getState())

// 訂閱state變化
// subscribe()方法返回一個函數用於取消監聽
const unsubscribe = store.subscribe(() => console.log(store.getState()))

// 發出一些action
store.dispatch(addTodo('Learn about actions'))
store.dispatch(addTodo('Learn about reducers'))
store.dispatch(addTodo('Learn about store'))
store.dispatch(toggleTodo(0))
store.dispatch(toggleTodo(1))
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED))

//取消監聽狀態更新
unsubscribe()

配置中間件

import { createStore } from 'redux'
import reducer from '../reducer/index'
import thunk from 'redux-thunk'
import promise from 'redux-promise'
import logger from 'redux-logger'

const store = createStore(
  reducer,
  applyMiddleware(thunk, promise, logger)
);

redux-thunk

store.dispatch()只能傳入一個action對象，redux-thunk中間件則將其擴展爲一個方法

//配置
import { createStore } from 'redux'
import reducer from '../reducer/index'
import thunk from 'redux-thunk'

const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

//使用
export function getDocMenu(query='') {
    return async(dispatch) => {
        try {
            const data = (await axios(`${baseUrl}doc.do?${Qs.stringify(query)}`)).data;
            //這裏的dispatch至關於store.dispatch
            dispatch({
                type: GET_PRODUCT_DOCUMENT_SUCCESS,
                data: data
            })
        }
        catch(error){
            dispatch({
                type: GET_PRODUCT_DOCUMENT_FAILURE,
                error: new Error('獲取文檔菜單失敗')
            })
        }
    }
}

redux-saga

解決異步的另外一種方法

//配置
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import reducer from './reducers'
import mySaga from './sagas'

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)

// then run the saga
sagaMiddleware.run(mySaga)


//使用
// action creators
export function GET_USERS(users) {
    return { type: RECEIVE_USERS, data }
}

export function GET_ERROR(error) {
    return { type: FETCH_USERS_ERROR, data }
}


export function Begin_GET_POSTS() {
    return { type: BEGIN_GET_POSTS }
}

//saga.js
import { takeEvery } from 'redux-saga';
import { call, put } from 'redux-saga/effects';
import axios from 'axios';
import { BEGIN_GET_POSTS, GET_POSTS, GET_POSTS_ERROR } from '../reducers';

// worker saga
function* showPostsAsync(action) {
    try {
        const response = yield call(axios.get, 'https://jsonplaceholder.typicode.com/posts');
        yield put({
            type: GET_POSTS,
            data: response.data
        });
    } catch(e) {
        yield put({
            type: GET_ERROR,
            error: new Error('some error')
        });
    }
}

// wacther saga
function* watchGetPosts() {
    yield takeEvery(BEGIN_GET_POSTS, showPostsAsync);
}

// root saga
export default function* rootSaga() {
    yield watchGetPosts()
} 

//user.js

componentWillMount() {
    this.props.dispatch(Begin_GET_POSTS());
}