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());
}