本文的读者为了解flux概念，熟悉react，了解es6语法的同学
redux 是最近很火的一个 flux 框架，短短的一个月现在已经有2900+的 star 了，watch之后每天收到几百封 pr 的邮件，废话就不多说了。
为什么要用 redux ，请看连接 The Evolution of Flux Frameworks。
主要特点
- Everything (Stores, Action Creators, configuration) is hot reloadable. —— 配合起 hotloader 应该特别爽，虽然现在用的是
browserify，好处感觉并不明显。 -
store中的数据不受限制，可以是numberobjectarray等等，废话，因为它的store只是简单的函数。 - 提供
devtools，监控action的触发以及state的变化。 - 源码清晰简单，轻量级，根本不需要文档，直接看源码就行了....缺点就是如果看不懂源码，光看文档会觉得不够清晰。
-
api很精简，不用记茫茫多的api - every thing is simple function
-
connecter与provider这两个东西用起来总觉得很繁琐，不那么优雅。
下面通过写的一个简单counter的例子 介绍 redux 的核心方法以及一些需要注意的地方。
- 同步与异步两种actionCreator
- middleware的使用
- dispatch actions
- 拿到并同步state
代码放在https://github.com/yeatszhang/redux-tutorial， 需要安装gulp
代码是基于分支 v1.0.0-rc api略微有些区别，详情见 Breaking API changes for 1.0。
actionCreator
actions creator 是用来生成 action 的函数，在默认情况下可以接受返回object或者function 的函数，很多人学习flux的时候把action与actionCreator弄混淆....：
// 直接返回object
actionCreators.addTodo = function(text) {
return {
type: types.ADD_TODO,
text
};
}
// 返回函数
actionCreators.incrementAsync = function() {
return (dispatch, getState) => {
// actionCreator中可以通过getState获得当前的state
console.log(getState());
// 异步action
setTimeout(() => {
dispatch({
type: INCREMENT_COUNTER2,
});
}, 1000);
};
};
在没有使用任何 middleware 的情况下，只有这有两种 action 可以被 dispatch。
app
在动态内容的最外层应该使用Provider进行包裹，provider接收store作为参数，注意children是一个函数并不是reactElement。
provider将store作为context往子节点进行传递，并实现store的热替换。因此在provider内的组件其实可以不通过connect来拿到dispatch以及state，而直接通过context拿到store对象，不过作者不推荐这么做。
import React from 'react';
import { createStore, applyMiddleware, combineReducers } from 'redux';
// redux midlleware repositories
import thunk from 'redux-thunk';
// 将 redux 与 react 相关的部分，如 connector provider 单独抽取出来
import { Provider } from 'react-redux';
import reducers from '../reducers';
import CounterApp from './CounterApp.js';
import logMiddleware from '../middleWares/logMiddleware.js';
const reducer = combineReducers(reducers);
const createStoreWithMiddleware = applyMiddleware(thunk, logMiddleware)(createStore);
const store = createStoreWithMiddleware(reducer);
// 使用middleWare thunk， 如果没有自定义中间层的需求可以直接写
// const store = createStore(reducer);
class App extends React.Component {
render() {
return (
<Provider store={store}>
{() => <CounterApp />}
</Provider>
);
}
}
smart component
smart component拥有两个特点：
- 自动关联store中的state并自动re-render
- 可以通过dispatch来分发事件，从而触发store的更新
刚接触redux的同学肯定会觉得这个connect很难以理解。还是在代码里面说把。。。
/**
* Created by yichizhang on 15/7/26.
*/
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { Connector } from 'react-redux';
import Counter from '../components/Counter';
import actionCreators1 from '../actionCreators/actionCreators1.js';
import actionCreators2 from '../actionCreators/actionCreators2.js';
// state 是各reducer中state的集合
function select(state) {
// 从各reducer中挑选出component需要监听的state
return {
counter1: state.reducer1.counter,
counter2: state.reducer2.counter,
};
}
export default class CounterApp extends Component {
// select函数的返回值会与dispatch组装程一个object作为参数
// 从这里看出connector就是帮忙拿到provider中store的dispatch方法以及挑选出需要使用的state
renderChild({ counter1, counter2, dispatch}) {
// 个人觉得这样使用action十分不方便，尤其是当组件只需要触发actions不需要监听store的变化的时候。我会偷懒通过context去拿到dispatch~~
const actions1 = bindActionCreators(actionCreators1, dispatch);
const actions2 = bindActionCreators(actionCreators2, dispatch);
const props = { ...actions1, ...actions2, counter1, counter2 };
// 所有的action以及state都会以props的形式提供给Counter，然后在Counter里面就可以为所欲为了~
return <Counter {...props} />;
}
render() {
return (
<Connector select={select}>
{this.renderChild}
</Connector>
);
}
}
reducer
redux认为程序员不需要去写store中的逻辑而只需要写明对state的处理逻辑就好：
old sate => action => new state
这是一个完全同步的过程。reducer只需要声明初始状态以及state在接收到action之后的改变规则就可以了。
import React from 'react/addons';
import {INCREMENT_COUNTER1, DECREMENT_COUNTER1} from '../constants/actionsTypes.js';
const update = React.addons.update;
// state可以是任何类型
const initialState = {
counter: 0,
};
// reducer只是一个简单的switch方法
export default function counter(state = initialState, action = null) {
switch (action.type) {
case INCREMENT_COUNTER1:
// 需要注意的是connector当select中的state发生变化时会做一个shallow equal的操作，
// 所以如果需要操作引用值的时候一定不能直接赋值，需要使用addon中的update或者immutable.js，知道看到这两个工具又不想继续学了..其实很简单
// 这样可以大大避免重复的render，从而提高性能
return update(state, {
counter: {
$set: state.counter + 1,
},
});
case DECREMENT_COUNTER1:
return update(state, {
counter: {
$set: state.counter - 1,
},
});
default:
return state;
}
}
middleWare
感兴趣的同学可以看看，一般来说默认的thunk就够用了。我在例子里加了个log的中间层
// 打印触发的action
function logMiddleware() {
// 这里的next是下一个middleWare
return function(next) {
return function(action) {
// 打印此action并使用下一个middleWare处理该action
console.log(action);
next(action);
};
};
}
export default logMiddleware;
// 下面是默认的thunk middleWare
function thunkMiddleware(_ref) {
var dispatch = _ref.dispatch;
var getState = _ref.getState;
return function (next) {
return function (action) {
// 如果是函数则将dispatch与getState作为参数执行函数，否则交给写一个middleware处理
return typeof action === 'function' ? action(dispatch, getState) : next(action);
};
};
}
结语
其实redux不明白的地方直接看源码更好，redux的代码量很小而且组织也很清晰，建议大家都去看，不过作者貌似函数式编程的思维很重，大量使用修饰器的语法，还有reduce~ 挺绕的~
之后会总结自己阅读redux源码的一些心得，以及各功能模块的实现原理~
