react+redux，异步请求为什么要写在action creator里面？

Question

在redux官方文档里面，针对异步给出的方案是：

export function fetchPosts(subreddit) {
  return function (dispatch) {
    dispatch(requestPosts(subreddit));//准备发起请求
    return fetch(`http://www.subreddit.com/r/${subreddit}.json`)
      .then(response => response.json())
      .then(json => dispatch(receivePosts(subreddit, json)))//拿到请求结果
  }
}

主要思路是：

1. 这是一个特殊的action creator(返回了一个function）
2. 在这个action creator里面，可以dispatch其他action
3. 通过redux-thunk中间件，可以dispatch(fetchPosts('sth'))

为什么异步请求不能直接写在容器组件的mapDispatchToProps里面?

const mapDispatchToProps = dispatch => ({
    fetchTest: () => {
        dispatch(fetch_request());//准备发起请求
        fetch('/package.json')
            .then(response => response.json())
            .then(json => dispatch(fetch_success(json)))//拿到请求结果
    }
});

@connect(mapStateToProps, mapDispatchToProps)
export default class MyContainer extends Component {
    render() {
        return (
            <div>
                <UIList />
                <FetchBtn fetchTest={this.props.fetchTest} />
            </div>
        )
    }
}

//Fetchbtn
handleClick = (e) => {
    this.props.fetchTest();
}

感觉
1.不用引中间件（redux-thunk、redux-promise）了，也不用考虑中间件执行顺序等问题。
2.逻辑写在容器组件里面，感觉没什么毛病，UI组件如果需要，都可以拿到。

Answer 1

如果只是写一个 hello world，那没什么问题。甚至你会觉得 react + redux 累赘，还不如 jquery，甚至还不如直接原生 js 撸代码爽。

这是因为，应用框架不是用来解决简单问题的。

设想有这样一个应用，应用启动时需要后台拉数据(Ajax call)，这个API我们称为 A。同时，发生以下的事件也要去访问 A。

1. 应用被唤醒
2. 手动点击刷新，或者下拉刷新（参考微信朋友圈）
3. 本地编辑上传数据
4. 定时更新
   ...

可能还会有更多的事件需要我们去响应，按照你的思路，对应的组件都来主动调用 A 好了， 那么，同样的逻辑要写 N 次，不仅是发送，还有 response 处理，数据分发，错误处理，等等。

然后，一旦业务变动，你需要在这 N 个地方改代码，头痛吗？

希望看到这个答案的都能明白这个道理，应用框架不是用来解决简单问题的。 你尝不到甜头，觉得麻烦，累赘，那是因为，你还没有做过真正复杂的项目。和大项目的开发/维护难度相比，框架的难度不值一提。

为什么要用 webpack ？
为什么要用 gulp？
jquery vs react？
为什么一定要用框架？

好了，以上问题，答案就在上面。

如果同意，请帮我点赞，谢谢。

Answer 2

当然可以啊，但是这样的话不就把视图和数据处理混合在一起了嘛。使用redux本来就是为了把应用的状态和状态的变更方式独立维护起来的

Answer 3

可以这样写，但是这样如果多个组件需要调用到这个请求，那么每个组件的mapDispatchToProps都需要写，请求会分散在各个组件中，维护起来很不方便