Reducers

Introduction

Reducers are functions that update its underlying data synchronously and which name is prefixed with a '$'.

Don't forget to prefix the reducer with a '$' otherwise the framework will not generate its equivalent action.

As of v1.0 no error is thrown when declaring a reducer not prefixed with $, but this is likely to change.

Reducers are defined when creating state via a function that

• Receives a parameterless function that returns the current state at the time of its invocation.

We refer to this parameter as the getData parameter across the docs, we invite you to use the same name on your code

• Returns the actual reducers.

Imagine you have state to encapsulate a number, and you want to have two reducers

• $delta: It receives a number and applies it as delta to the current value.

• $multiply: it receives a number to be multiplied to the current value and sets the state to the result.

Js

getData => ({
    $delta(delta) {
        return getData() + delta;
    },
    $multiply(by) {
        return getData() * by;
    },

})

For an example that uses a simple reducer, check our $addTodo reducer in the Todos examples

The Reducers Interface

Having the reducers described as a function that receives getData and that returns the actual reducers was a meditated decision.

We understand that it adds a bit of boilerplate code when creating the state, but it allows the reducers to be described as pure business interfaces.

This, on the long run causes the overall boilerplate code to be less, as every time you have to use the reducers, you are going to use them through its plain business interface.

Js

state$.reducers.$delta(2);
state$.reducers.$multiplyBy(3);

This is specially nice if you are using typescript as you can type your Reducers interface.

Default Reducer

Every Conan State has a pre-built reducer. $update

One of the key principles of ConanJs is to allow developers creating atomic state, and then compose it when needed.

If you do this, many times you will be able to just use $update for most of your use cases

$update can be invoked in two different ways

• Absolute updates. Passing a simple object, which will be used as the new value.

• Relative updates. Passing a function that receives the current value, and returns the new value based on the value received

Relative updates are effectively a neat trick to leat you inline your reducers without having to declare them upfront

Imagine you had some Conan State that represents a number, and like the example above, you would like to set/delta/multiply its current value, you could do this easily without having to create the reducers/actions

Js

//set units bought to 3
unitsBought$.do.update (3)
//increment by one
unitsBought$.do.update (unitsBought=>++unitsBought)
//multiply by
unitsBought$.do.update (unitsBought=>unitsBought * 2)

For an example that uses a the default actions, check Hello Wow!

Reducers and Actions

If unspecified, ConanJs will create an action for each reducer that you create, it also provides for the counterpart action update associated to the reducer $update.

To see details around how can you describe custom actions, or override the actions that ConanJs will create based on your reducers, please check our next section Actions