简述React store的概念 ?

在React中,”store”通常指的是在使用Redux或MobX等状态管理库时用来管理应用全局状态的地方。

下面以Redux为例来解释一下store的概念:

在Redux中,store是一个JavaScript对象,它可以存储应用的整个状态树。Redux的store有以下几个主要的特性和功能:

  1. 维护应用的状态: store中包含了应用的整个状态,包括应用的数据以及UI的状态。

  2. 提供获取状态的方法: 可以通过store的getState方法来获取应用的当前状态。

  3. 提供更新状态的方法: 可以通过store的dispatch方法来分发(dispatch)action,更新应用的状态。这是改变store中状态的唯一方式。

  4. 注册和注销监听器: 可以通过store的subscribe方法来添加状态变化的监听器,当状态发生变化时,这些监听器会被调用。监听器可以通过返回的函数来注销。

例如,假设我们正在开发一个待办事项应用,我们可能会在store中存储一个待办事项列表的状态。当用户添加一个新的待办事项时,我们会分发一个action,这个action描述了这个变化(即添加一个新的待办事项)。然后,我们的reducer会接收到这个action,并根据这个action来更新store中的状态。当状态更新后,我们的UI会自动更新来反映这个新的状态。

// 创建一个 Redux store 来以存放应用的状态。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(todoApp);

// 可以手动订阅更新,也可以事件绑定到视图层。
store.subscribe(() => console.log(store.getState()));

// 改变内部 state 惟一方法是 dispatch 一个 action。
// action 可以被序列化,用日记记录和储存下来,后期还可以以回放的方式执行
store.dispatch(addTodo('Learn about actions'));

Redux的store提供了一种集中管理和更新应用状态的方式,使得状态的管理变得可预测且易于理解。

发表评论

后才能评论