这是 Flux 架构吗？

Question

这就是我组织我的 React / Redux 项目的方式，因为在我遵循的教程中他们就是这样做的。这就是 Flux 架构吗？如果不是，你会怎么称呼它？

首先，我在动作文件中定义的组件中调用一个函数
此函数执行 ajax 请求以从 API
然后它触发动作创建器
reducer 侦听动作创建者，一旦检测到它就会执行更新状态的函数

这是一个例子：

组件

class List extends React.Component {
  componentDidMount() {
    this.props.getPosts();
  }
  // etc...
}

const mapStateToProps = state => {
  return {
    posts: state.posts
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getPosts: () => dispatch(actions.getPosts())
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(List);

动作

const postsLoaded = posts => {
  return {
    type: actionTypes.POSTS_LOADED,
    posts: posts
  };
};

export const getPosts = () => {
  return dispatch => {
    axios
      .get('http://api.something.com/posts', {})
      .then(response => {
        dispatch(postsLoaded(response.posts));
      })
      .catch(e => {
        console.error(e);
      });
  };
};

减速机

const setPosts = (prevState, action) => {
  return {
    ...prevState,
    ...action.posts
  };
};

const reducer = (prevState = {}, action) => {
  switch (action.type) {
    case actionTypes.POSTS_LOADED:
      return setPosts(prevState, action);
    default:
      return prevState;
  }
};

export default reducer;

Answer 1

Flux 是一种设计模式。 Redux 是 实现 Flux 的几个库之一。目的不是让你"use Redux to implement Flux"，而是"use the Flux pattern by using Redux"。

您可以在下面的文档中找到更好的描述，但简单来说，Flux 架构基于单向数据流，这意味着每个部分从一个地方接收数据，并将更改输出到另一个地方。此模式的目的是消除 "spaghetti code"，其中应用程序的各个部分在许多不同的方向上传递数据，最终会变得非常难以追踪。

换句话说，你的组件就是下图中的"View"。

Redux 存储为您的组件提供状态
您的组件呈现某些内容，当用户执行操作时，组件会创建一个操作并将其提供给调度程序。
dispatcher 找到可以处理你的 action 的 reducer，并将结果交给 store。

然后循环重复。

可以在 here.

中找到这张图片和对 Flux 的深入概述

这是 Flux 架构吗？

Is this Flux architecture?

flux

reactjs

reactjs-flux

redux

react-redux