redux 多种触发dispatch方式
[原文链接]https://blog.bam.tech/developper-news/4-ways-to-dispatch-actions-with-redux
redux 作为js app的主要的状态容器和react结合的非常多。架构设计上基于action的触发机制，通过dispatch对应的action来修改状态，而状态的修改由统一的reducer来处理（为什么叫reducer呢，因为每个都可以作为reduce函数的参数来处理）如果对redux的原理还不怎么熟悉，可以先读下这篇文章,当然是因为的，对应的中文是这篇。
我们在这里将重点放在了第一步，也就是如何dispatch分发一个action。接下来我们就来处理这个问题，同时尽量保证component组件与redux的解耦。
举例来说吧，我们假定这样一个服务场景：就是用户要发送一个message到一个群里。我们首先要创建个form表单（这里是MessageSending.js）,另外还需要一个发送的按钮，当点击时将沃恩的消息发给对应的API后台。
PS：在下面的所有例子中，规定action creators 就叫actions
方法1： 直接通过dispatch方法
dispatch函数作为store对象的方法可以直接调用
// App.js
import { createStore } from 'redux';
import { MessageSending } from './MessageSending';
import reducer from './reducer';
const store = createStore(reducer);
class App extends React.Component {
render() {
<MessageSending store={store} />
};
};
// MessageSending.js
import { sendMessage } from './actions';
// ...
this.props.store.dispatch(sendMessage(message))
// ...方法2：使用react-redux
上面一种方法的缺点是component需要包含你的app逻辑，而redux的作者之一的Dan Abramov建议需要可以将逻辑connect到store里面（详情可以参见笔者翻译的另一篇文章，同样出自Dan Abramov，讲述Container组件与Presentation组件的区分）。所以我们就来实现下，创建一个MessageSending.container.js文件，在其中调用connect方法，而其中第二个参数function mapDispatchToProps，将所有的action creators做了封装，然后统一传递到组件中。
// MessageSending.container.js
import { connect } from 'react-redux';
import { sendMessage } from './actions';
import MessageSending from './MessageSending';
const mapDispatchToProps = {
sendMessage,
};
export default connect(null, mapDispatchToProps)(MessageSending);
// MessageSending.js
// ...
this.props.sendMessage(message);
// ...
If you want to dispatch several actions in one method you can do like that:
import { connect } from 'react-redux';
import { sendMessage, navigateTo } from './actions';
const mapDispatchToProps = dispatch => ({
sendMessage: messaga => {
dispatch(sendMessage(message));
dispatch(navigateTo({ routeName: 'messagesList' }));
},
});
export default connect(null, mapDispatchToProps)(MessageSending);
// MessageSending.js
// ...
this.props.sendMessage(message);
// ...
});方法3： 通过saga来dispatch action
如果想要按顺序挨个执行多个异步的指令，同时还想保证状态可读，那么就可以通过触发一个saga来实现。在saga中可以在dispatch actions时带上put效果，想要了解更多的信息可以查阅redux-saga的文档。
// sagas.js
import { put } from 'redux-saga/effects';
import { sendMessage, setLoading, navigateTo } from './actions';
export function* sendMessage(action) {
yield put(setLoading('sendMessagePage', true));
yield put(sendMessage(action.payload.message));
yield put(navigateTo({routeName: 'messagesList'}));
yield put(setLoading('sendMessagePage', false));
}方法4：使用bindActionCreators方法
bindActionCreators方法能让你在没有connect到store的组件上dispatch actions，就像借助mapDispatchToPros connect的一样。
这个方法的使用还是不高的，而且react-redux已经实现了相应的功能，所以说Redux的维护者Mark Erikson也建议不要使用它。
不过下面的例子是受了redux的启发，假定有个MessageSendingPage页面，页面已经connect完成，所以可以dispatch方法了。这个页面包含了一个MessageSending组件是完全不清楚redux存在的。
// MessageSendingPage.js
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './actions';
class MessageSendingPage extends React.Component {
constructor(props) {
super(props);
const { dispatch } = props;
this.boundActions = bindActionCreators(actions, dispatch);
}
render() {
return <MessageSending {...this.boundActions} />;
}
}
export default connect()(MessageSendingPage);总结
所以我们到底该如何选择呢？
很难说，完全取决于你的使用场景。不过就使用频率来看的话，第2和第3种是比较推荐的。