Redux中的actions

1. Action定义

Actions是中包含的是我们发送到store中的数据,或者触发store中的数据更新,而且在redux中actions是store中数据更新的唯一来源。我们使用store.dispatch()来发送actions。
下面给出一个action的示例:

const ADD_TODO = 'ADD_TODO'
{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}
由示例我们可以看出,action必须定义为JavaScript对象,其中:
type:该字段是必须存在的,用来描述action的类型,而且该字段的值在整个应用中必须是唯一的。
text:该字段是可选的,用来描述传递到store中的数据。

当然,除了type之外,你可以将action定义成任何你想要的结构。但是我们最好还是依据 Flux Standard Action来定义action。

2. Flux Standard Action

在Flux标准中action的定义如下:
一个JavaScript基本对象。
必须含有type属性。
可以包含error属性。
可以包含payload属性。
可以包含meta属性。

action不能包含除了type, payload, error和meta之外的任何属性。

3. redux-actions

为了创建出更加符合标准的action,我们可以借助redux-actions来完成。

使用方式为:
createAction(type, payloadCreator = Identity, ?metaCreator)

其中,payloadCreator必须是方法、undefined或者null。如果payloadCreator为undefined或null,则默认为一个恒等方法。
例如:

let increment = createAction('INCREMENT', amount => amount);
// same as
increment = createAction('INCREMENT');

expect(increment(42)).to.deep.equal({
  type: 'INCREMENT',
  payload: 42
});

更多信息参照redux-actions

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Redux的Counter是一个示例,用来展示如何使用Redux来管理应用程序的状态。Counter通常用来记录一个数字的状态,并提供增加和减少这个数字的操作。 在Redux,Counter的状态被保存在一个称为Store的对象。Store是Redux的核心概念之一,它保存了整个应用程序的状态树,并提供了一些方法来管理状态。 为了创建一个Counter,我们需要定义一个称为Reducer的函数。Reducer是一个纯函数,用于根据给定的操作类型来更新状态。在Counter,Reducer可以处理两种操作类型:增加和减少。 我们还需要定义一些Action来表示用户的操作。在Counter,可以有两个Action:INCREMENT和DECREMENT。 最后,我们需要创建一个Redux Store,并将Reducer传递给它。我们还可以使用Redux提供的一些辅助函数来处理状态的更新和访问。 以下是一个简单的Counter示例: ```javascript // Counter Reducer const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }; // Counter Actions const increment = () => { return { type: 'INCREMENT' }; }; const decrement = () => { return { type: 'DECREMENT' }; }; // Create Redux Store const store = Redux.createStore(counterReducer); // Dispatch Actions store.dispatch(increment()); store.dispatch(increment()); store.dispatch(decrement()); // Get Current State console.log(store.getState()); // Output: 1 ``` 在上面的示例,我们定义了一个Counter Reducer来处理增加和减少操作。我们还定义了两个Action:INCREMENT和DECREMENT。然后,我们创建了一个Redux Store并将Reducer传递给它。最后,我们分发了一些Action来更新状态,并使用`store.getState()`来获取当前状态。 这只是ReduxCounter的基本概念,实际应用可能会更复杂。但是这个示例可以帮助你理解Redux如何管理应用程序的状态。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值