首先是配置$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结构优化的整个过程相当有意思；另一方面也是出于项目需要，双向绑定虽然用起来非常爽，但是当项目逐渐庞大时,"视图->模型->视图"的变化会越来越复杂，直到你最后搞不清楚这些变化的源头
