angular + redux 项目实践的一些探索

首先是配置$ngRedux 服务

app.config(/*@ngInject*/$ngReduxProvider => {
        let middleware = ['ngUiRouterMiddleware']

        const reducers = {
            router,         //静态写法
            lang: langReducer,
            session: sessionReducer,
            [actionTagManagement.name]: actionTagManagement.reducer   //动态写法
        }

      $ngReduxProvider.createStoreWith(reducers, middleware)

项目中的探索

目的效果就是几个简单的折叠展开的效果。
按照angular的做法很简单，通过ng-show能够快速完成，现在思考用redux的方式。
最初的代码：

import html from './index.html'
import './index.scss'

let prefix = 'actionApi_'     //需要prefix来确保action的全局唯一性
const OPT_STATUS = prefix + 'OPT_STATUS'
const OPT_SAMPLE = prefix + 'OPT_SAMPLE'
const OPT_LOG = prefix + 'OPT_LOG'

const defaultState = {
    showStatus: true,
    showLog: false,
    showSample: false
}

export function reducer(state = defaultState, action) {
    switch (action.type){
        case OPT_STATUS: {
            return Object.assign({}, state, {
                    showStatus: action.data
            })
        }
        case OPT_SAMPLE: {
            return Object.assign({}, state, {
                    showSample: action.data
            })
        }
        case OPT_LOG: {
            return Object.assign({}, state, {
                    showLog: action.data
            })
        }
        default: {
            return state
        }
    }
}
export const name = 'action.api'
export const state = {
    url: '/api',
    template: html,
    controllerAs: '$ctrl',
    controller: /*@ngInject*/($scope, $ngRedux) => {
        let unSubscribe = $ngRedux.connect((state) => {
            return {
                  showStatus: state[name].showStatus,
                  showSample: state[name].showSample,
                  showLog: state[name].showLog
            }
        }, Object.assign({}))($scope)

        $scope.$on('$destroy', unSubscribe)     //销毁监听器

        $scope.collapseStatus = (data) => {
            $ngRedux.dispatch(function(data){
                return {
                    type: OPT_STATUS,
                    data
                }
            }(!data))
        }       
        //function 为action 生成函数，这里定义函数后立即执行，实际上生成了一个action
        $scope.collapseSample = (data) => {
            $ngRedux.dispatch(function(data){
                return {
                    type: OPT_SAMPLE,
                    data
                }
            }(!data))
        }

        $scope.collapseLog = (data) => {
            $ngRedux.dispatch(function(data){
                return {
                    type: OPT_LOG,
                    data
                }
            }(!data))
        }
       
    }
}

html 中：

<h2 ng-click="collapseSample(showSample)">
         <a href=""><span class="glyphicon glyphicon-menu-down doc-arrow" ng-class="{'doc-arrow-hide': showSample == false}"></span></a>
         <span class="doc-h2-pointer">获取Sample数据</span>
 </h2>
 <div class="doc-hide-content" ng-show="showSample">
......
</div>

目的已经完成了。写法上很像angular。

$ngRedux.connect()函数的第一个参数实际上是一个函数，它返回一个对象。这里的state即全局的state，我们得到我们需要的本地state，并和angular中的变量建立一种绑定关系。

第二个参数是一个对象，表示我们进行的一些操作 ，redux是通过触发action来更改状态。我们的操作实际上也就是返回一些action，交由reducer来更改state，从而达到改变视图的目的

代码看起来有点臃肿。让我们进行一下优化：

  let unSubscribe = $ngRedux.connect((state) => {
            Object.assign({}, state[name])
        }, Object.assign({}, {
            collapseStatus: (data) => {
                return {
                    type: OPT_STATUS,
                    data: !data
                }
            },
            collapseSample: (data) => {
                return {
                    type: OPT_SAMPLE,
                    data: !data
                }
            },
            collapseLog: (data) => {
                return {
                    type: OPT_LOG,
                    data: !data
                }
            }
        }))($scope)

        $scope.$on('$destroy', unSubscribe)     //销毁监听器

看起来还是有点别扭，前面的代码中我们实际上声明了三种action，分别对应于三个栏目的折叠情况。那么问题来了，当一个页面需要折叠的地方很多怎么办？难道一直增加action吗？仔细想一下，这几个action本身就非常相似。考虑继续缩减代码，只提供一个action生成函数。

这时候，为了描述每个栏目的折叠状态，我们的action生成函数需要两个参数，一个描述是哪个栏目，一个描述折叠状态（是展开还是折叠）

        Object.assign({}, {collapse: (option, selected) => {
            let data = {
                [option]: !selected
            }
            return {
                type: OPT_COLLAPSE, 
                data
            }
        }}))($scope)

同样的，reducer函数里面也可以缩减，像这样：

export function reducer(state = defaultState, action) {
    switch (action.type){
        case OPT_COLLAPSE: {
            return Object.assign({}, state, action.data)
        }
        default: {
            return state
        }
    }
}

相应的，更改html：

<h2 ng-click="collapse('showSample', showSample)">
       <a href=""><span class="glyphicon glyphicon-menu-down doc-arrow" ng-class="{'doc-arrow-hide': showSample == false}"></span></a>
       <span class="doc-h2-pointer">获取Sample数据</span>
</h2>

大功告成，完整js代码如下：

import html from './index.html'
import './index.scss'

let prefix = 'actionApi_'
const OPT_COLLAPSE = prefix + 'OPT_COLLAPSE'

const defaultState = {
    showStatus: true,
    showLog: false,
    showSample: false
}

export function reducer(state = defaultState, action) {
    switch (action.type){
        case OPT_COLLAPSE: {
            return Object.assign({}, state, action.data)
        }
        default: {
            return state
        }
    }
}
export const name = 'action.api'
export const state = {
    url: '/api',
    template: html,
    controllerAs: '$ctrl',
    controller: /*@ngInject*/($scope, $ngRedux, langActions, sessionActions) => {
        let unSubscribe = $ngRedux.connect((state) => {
            return Object.assign({}, state[name])
        }, Object.assign({}, {collapse: (option, selected) => {
            let data = {
                [option]: !selected
            }
            return {
                type: OPT_COLLAPSE, 
                data
            }
            }}))($scope)

        $scope.$on('$destroy', unSubscribe)
    }
}

写在后面

前文曾经说过，这个效果其实单纯用angular很容易就能实现，这里用redux的方式有点杀鸡用牛刀的感觉。

之所以这么大费周章，一方面当然是为了学习新技术，对action生成函数，reducer结构优化的整个过程相当有意思；另一方面也是出于项目需要，双向绑定虽然用起来非常爽，但是当项目逐渐庞大时,"视图->模型->视图"的变化会越来越复杂，直到你最后搞不清楚这些变化的源头

文档与参考

redux 中文文档
angular-redux/ng-redux