这是Flux架构吗？

Question

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

• 首先，我在操作文件中定义的组件中调用一个函数
• 此函数执行ajax请求以从API获取信息
• 然后解雇动作创建者
• reduce侦听动作创建者，一旦检测到动作执行者便执行一项更新状态的功能

这是一个例子：

组件

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

助焊剂是一种设计模式。 Redux是实现Flux 的几个库之一。目的不是让您“使用Redux实现Flux”，而是“通过Redux使用Flux模式”。

您可以在下面的文档中找到更好的描述，但是用最简单的术语来说，Flux体系结构是基于单向数据流的，这意味着每一块都从一个地方接收数据，并将更改输出到另一个地方。这种模式的目的是消除“意大利面条式代码”，即应用程序的各个部分在许多不同的方向上传递数据，最终可能很难跟踪。

换句话说，您的组件就是下图中的“视图”。

• Redux存储为您的组件提供状态
• 您的组件会渲染某些东西，当用户执行操作时，该组件会创建一个操作并将其提供给调度程序。
• 调度员找到可以处理您的操作的减速器，并将结果提供给商店。

然后重复循环。

可以在here中找到此图片和Flux的深入概述。