Actions & Reducers

Introduction

ConanJs allows to interact with the state by using Actions & Reducers.

Reducers

Reducers are used to update the underlying data and must be prefixed with the symbol ‘$’

Reducers are not meant to be accessed by users of the State (actions are).

ConanJs will create an action for each reducer automatically.

Always add the $ to your reducer name, if you do so, the framework will create a matching action without the $ (unless you override it)

Actions

Actions are automatically created or provided to add additional logic. They serve as interfaces to increase state reusability and are also chainable

Actions make up the public API through which your Conan State can be used.

Defaults

Defaults reducers and default actions are always available when a state is created with Conan.

	Sync	Async
Reducers	$update	-
Actions	update	updateAsap

Both update and $update can receive either:

• A value to use as new state,

• A reducer function to provide a new value based on its current value.

UpdateAsap receives an ASAP value

You can see our 'Hello Wow!' showcasing the usage of the default actions.

To learn more about reducers, how to define them, and the default reducer, check out our reducers section.

To learn more about actions, how to define them, their return value, and the default actions, check out our actions section.

Actions as your API

Each Conan State will have a clear actions interface which can help to see each ConanState as an injectable capsule of behaviour.

Combined with Dependency Injection allows developers to think of state as configurable and injected logic.

In your UI you can declare what type of state your component is going to be receiving, and decide its actual implementation.

You can see this in our Todos and Todos - Async examples, where the todo list renderer does not fundamentally change even though one has async actions.

Invoking the actions

Invoking actions is very simple, they are all available under the 'do' property for the state after it has been created

myState$.do.myAction

So that we are clear, you can access actions straight from the State!

Guidelines

It might be difficult at first to decide how to shape your Conan State, including its reducers and actions.

To help you decide we provide with the following guidelines.

1- Create the smallest Conan State that you possibly can. The best way to do this is to leverage the light method to create state and start by not creating any reducers or actions, but just use the out of the box actions update and updateAsap. You could have state that represents units of information, like, a list of todos, the current filter to use for an action... Then, in your views, if you need to combine them, user our composition patterns You could also further leverage our DI, to have all these states already prebuilt and injected.

2- If you need to add more logic, choose creating a reducer first. Creating reducers is simpler than creating actions, and ConanJs will automatically generate an action for you.

3- If you need to have a few actions being triggered once after another, of conditionally, see if you can orchestrate them first. With ConanJs you can react to changes in a different state

4- If you need to add async actions, auto-bind them if possible. Auto binding removes boilerplate code by using a name convention to tie an async operation with its matching reducer.

5- If you need to add async actions that can't be auto-bind, use a monitor action. Monitors allow you to connect async Asaps to reducers easily

6- Create custom actions when you need to add additional logic or override an action. This is fully explained in the actions section