react状态管理之flux

最新推荐文章于 2025-04-18 08:44:01 发布

原创最新推荐文章于 2025-04-18 08:44:01 发布

· 1.1k 阅读

0 ·

版权

文章标签：

#flux #react状态管理

React 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Flux架构的基本概念，包括Actions、Stores和Dispatcher的作用及其实现方式。详细解释了如何创建Actions来定义应用中的操作，如何创建Stores来管理状态和数据，以及如何使用Dispatcher来协调Actions和Stores之间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flux逻辑理解

这里写图片描述

1.创建Actions
包括所有的动作，比如点击按钮添加列表项，这就是一个action，在action文件中直接用dispatcher方法来分配这个动作
action是用来暴露给外部进行调用

addNewItem: function (text) {
  AppDispatcher.dispatch({
    actionType: 'ADD_NEW_ITEM',
    text: text
  });
},

2.创建store
store里面包含了应用的状态和逻辑，用来管理应用中不同的状态和逻辑
store中可以用数组来存储应用中所需要的数据，然后外部通过调用strore中的方法来获取到数据放到state中。

items: [],

getAll: function () {
  return this.items;
},

3.创建dispacher
在dispatcher中通过register来给每个action注册对应的store中的方法

AppDispatcher.register(function (action) {
  switch(action.actionType) {
    case 'ADD_NEW_ITEM':
      ListStore.addNewItemHandler(action.text);
      ListStore.emitChange();
      break;
    default:
      // no op
  }
})

4.在view层通过调用action中的方法来调用这个动作

  createNewItem: function (event) {
    ButtonActions.addNewItem('new item');
  },

  render: function() {
    return <MyButton
      items={this.state.items}
      onClick={this.createNewItem}
    />;
  }