Foreword

By chance I had the opportunity to participate in a project using React-Native and Redux architecture, I was really interested in Redux . That is also the reason I want to apply the Redux architecture to Android applications.

The library that I use in this article is called Kdux

What is redux

Redux is a predictable state management tool for JS applications. It helps you write applications that operate consistently, run in different environments (client, server, and native) and are easy to test. Detail

Redux consists of the main components:

• Store: The state that manages the State or state of the application.
• Actions: This is where you define the events that the application wants to communicate with the State managed in the Store through the store.dispatch() .
• Reducers: As the processing layer, they will retrieve the current state, through the events defined in Actions , corresponding to each action, they will return a new state.

Begin

We will start making a simple counting application.

• Initialize a State
  
  <span class="token keyword">data</span> <span class="token keyword">class</span> <span class="token function">CounterState</span> <span class="token punctuation">(</span> <span class="token keyword">val</span> number <span class="token operator">:</span> Int <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token operator">:</span> State

  1 2

  <span class="token keyword">data</span> <span class="token keyword">class</span> <span class="token function">CounterState</span> <span class="token punctuation">(</span> <span class="token keyword">val</span> number <span class="token operator">:</span> Int <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token operator">:</span> State

• Initialize an Action
  
  <span class="token keyword">sealed</span> <span class="token keyword">class</span> CounterAction <span class="token operator">:</span> Action <span class="token punctuation">{</span> <span class="token keyword">object</span> INCREASE <span class="token operator">:</span> <span class="token function">CounterAction</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">object</span> DECREASE <span class="token operator">:</span> <span class="token function">CounterAction</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">companion</span> <span class="token keyword">object</span> <span class="token punctuation">{</span> <span class="token keyword">fun</span> <span class="token function">increaseAction</span> <span class="token punctuation">(</span> dispatch <span class="token operator">:</span> Dispatch <span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token function">dispatch</span> <span class="token punctuation">(</span> INCREASE <span class="token punctuation">)</span> <span class="token keyword">fun</span> <span class="token function">decreaseAction</span> <span class="token punctuation">(</span> dispatch <span class="token operator">:</span> Dispatch <span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token function">dispatch</span> <span class="token punctuation">(</span> DECREASE <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>

  1 2 3 4 5 6 7 8 9 10 11 12

  <span class="token keyword">sealed</span> <span class="token keyword">class</span> CounterAction <span class="token operator">:</span> Action <span class="token punctuation">{</span>     <span class="token keyword">object</span> INCREASE <span class="token operator">:</span> <span class="token function">CounterAction</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>       <span class="token keyword">object</span> DECREASE <span class="token operator">:</span> <span class="token function">CounterAction</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>       <span class="token keyword">companion</span> <span class="token keyword">object</span> <span class="token punctuation">{</span>         <span class="token keyword">fun</span> <span class="token function">increaseAction</span> <span class="token punctuation">(</span> dispatch <span class="token operator">:</span> Dispatch <span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token function">dispatch</span> <span class="token punctuation">(</span> INCREASE <span class="token punctuation">)</span>           <span class="token keyword">fun</span> <span class="token function">decreaseAction</span> <span class="token punctuation">(</span> dispatch <span class="token operator">:</span> Dispatch <span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token function">dispatch</span> <span class="token punctuation">(</span> DECREASE <span class="token punctuation">)</span>     <span class="token punctuation">}</span> <span class="token punctuation">}</span>

• Create a Reducer
  
  <span class="token keyword">class</span> CounterReducer <span class="token operator">:</span> Reducer <span class="token operator">&lt;</span> CounterState <span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">reduce</span> <span class="token punctuation">(</span> state <span class="token operator">:</span> CounterState <span class="token punctuation">,</span> action <span class="token operator">:</span> Action <span class="token punctuation">)</span> <span class="token operator">:</span> CounterState <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">when</span> <span class="token punctuation">(</span> action <span class="token punctuation">)</span> <span class="token punctuation">{</span> CounterAction <span class="token punctuation">.</span> INCREASE <span class="token operator">-&gt;</span> state <span class="token punctuation">.</span> <span class="token function">copy</span> <span class="token punctuation">(</span> number <span class="token operator">=</span> state <span class="token punctuation">.</span> number <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">)</span> CounterAction <span class="token punctuation">.</span> DECREASE <span class="token operator">-&gt;</span> state <span class="token punctuation">.</span> <span class="token function">copy</span> <span class="token punctuation">(</span> number <span class="token operator">=</span> state <span class="token punctuation">.</span> number <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token keyword">else</span> <span class="token operator">-&gt;</span> state <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>

  1 2 3 4 5 6 7 8 9 10 11 12

  <span class="token keyword">class</span> CounterReducer <span class="token operator">:</span> Reducer <span class="token operator">&lt;</span> CounterState <span class="token operator">&gt;</span> <span class="token punctuation">{</span>     <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">reduce</span> <span class="token punctuation">(</span> state <span class="token operator">:</span> CounterState <span class="token punctuation">,</span> action <span class="token operator">:</span> Action <span class="token punctuation">)</span> <span class="token operator">:</span> CounterState <span class="token punctuation">{</span>         <span class="token keyword">return</span> <span class="token keyword">when</span> <span class="token punctuation">(</span> action <span class="token punctuation">)</span> <span class="token punctuation">{</span>             CounterAction <span class="token punctuation">.</span> INCREASE <span class="token operator">-&gt;</span> state <span class="token punctuation">.</span> <span class="token function">copy</span> <span class="token punctuation">(</span> number <span class="token operator">=</span> state <span class="token punctuation">.</span> number <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">)</span>               CounterAction <span class="token punctuation">.</span> DECREASE <span class="token operator">-&gt;</span> state <span class="token punctuation">.</span> <span class="token function">copy</span> <span class="token punctuation">(</span> number <span class="token operator">=</span> state <span class="token punctuation">.</span> number <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">)</span>               <span class="token keyword">else</span> <span class="token operator">-&gt;</span> state         <span class="token punctuation">}</span>     <span class="token punctuation">}</span> <span class="token punctuation">}</span>

• CounterActivity
  
  <span class="token keyword">class</span> CounterActivity <span class="token operator">:</span> <span class="token function">AppCompatActivity</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> Enhancer <span class="token operator">&lt;</span> CounterState <span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">private</span> <span class="token keyword">val</span> store <span class="token operator">:</span> Store <span class="token operator">&lt;</span> CounterState <span class="token operator">&gt;</span> <span class="token keyword">by</span> lazy <span class="token punctuation">{</span> <span class="token function">Store</span> <span class="token punctuation">(</span> <span class="token function">CounterReducer</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token function">CounterState</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token comment">// applyMiddleware(...)</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token comment">/** * Nếu bạn muốn xem lịch sử thay đổi của các trạng thái, * Kdux có cung cấp cho chúng ta một công cụ gọi là KduxDevTools. * Chúng ta sẽ khởi tạo store thông qua thương thức composeWithDevTools. * * private val store: Store&lt;CounterState&gt; by lazy { * composeWithDevTools( * CounterReducer(), * CounterState() * // applyMiddleware(...) * ) * } */</span> <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onCreate</span> <span class="token punctuation">(</span> savedInstanceState <span class="token operator">:</span> Bundle <span class="token operator">?</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token function">onCreate</span> <span class="token punctuation">(</span> savedInstanceState <span class="token punctuation">)</span> <span class="token function">setContentView</span> <span class="token punctuation">(</span> R <span class="token punctuation">.</span> layout <span class="token punctuation">.</span> activity_counter <span class="token punctuation">)</span> btnIncrease <span class="token punctuation">.</span> <span class="token function">setOnClickListener</span> <span class="token punctuation">{</span> CounterAction <span class="token punctuation">.</span> <span class="token function">increaseAction</span> <span class="token punctuation">{</span> store <span class="token punctuation">.</span> <span class="token function">dispatch</span> <span class="token punctuation">(</span> it <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> btnDecrease <span class="token punctuation">.</span> <span class="token function">setOnClickListener</span> <span class="token punctuation">{</span> CounterAction <span class="token punctuation">.</span> <span class="token function">decreaseAction</span> <span class="token punctuation">{</span> store <span class="token punctuation">.</span> <span class="token function">dispatch</span> <span class="token punctuation">(</span> it <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// btnUndo.setOnClickListener {</span> <span class="token comment">// store.dispatch(KduxDevToolAction.UNDO)</span> <span class="token comment">// }</span> <span class="token comment">// btnRedo.setOnClickListener {</span> <span class="token comment">// store.dispatch(KduxDevToolAction.REDO)</span> <span class="token comment">// }</span> <span class="token comment">// btnReset.setOnClickListener {</span> <span class="token comment">// store.dispatch(KduxDevToolAction.RESET)</span> <span class="token comment">// }</span> <span class="token punctuation">}</span> <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onStart</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token function">onStart</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> store <span class="token punctuation">.</span> <span class="token function">subscribe</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onStop</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token function">onStop</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> store <span class="token punctuation">.</span> <span class="token function">unsubscribe</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">enhance</span> <span class="token punctuation">(</span> state <span class="token operator">:</span> CounterState <span class="token punctuation">)</span> <span class="token punctuation">{</span> txtNumber <span class="token punctuation">.</span> text <span class="token operator">=</span> <span class="token string">" <span class="token interpolation"><span class="token delimiter variable">${</span> state <span class="token punctuation">.</span> number <span class="token delimiter variable">}</span></span> "</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span>

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

  <span class="token keyword">class</span> CounterActivity <span class="token operator">:</span> <span class="token function">AppCompatActivity</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> Enhancer <span class="token operator">&lt;</span> CounterState <span class="token operator">&gt;</span> <span class="token punctuation">{</span>     <span class="token keyword">private</span> <span class="token keyword">val</span> store <span class="token operator">:</span> Store <span class="token operator">&lt;</span> CounterState <span class="token operator">&gt;</span> <span class="token keyword">by</span> lazy <span class="token punctuation">{</span>         <span class="token function">Store</span> <span class="token punctuation">(</span>             <span class="token function">CounterReducer</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>             <span class="token function">CounterState</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>             <span class="token comment">// applyMiddleware(...)</span>         <span class="token punctuation">)</span>     <span class="token punctuation">}</span>          <span class="token comment">/**     * Nếu bạn muốn xem lịch sử thay đổi của các trạng thái,     * Kdux có cung cấp cho chúng ta một công cụ gọi là KduxDevTools.     * Chúng ta sẽ khởi tạo store thông qua thương thức composeWithDevTools.     *     * private val store: Store&lt;CounterState&gt; by lazy {     *     composeWithDevTools(     *         CounterReducer(),     *         CounterState()     *         // applyMiddleware(...)     *     )     * }     */</span>       <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onCreate</span> <span class="token punctuation">(</span> savedInstanceState <span class="token operator">:</span> Bundle <span class="token operator">?</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>         <span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token function">onCreate</span> <span class="token punctuation">(</span> savedInstanceState <span class="token punctuation">)</span>         <span class="token function">setContentView</span> <span class="token punctuation">(</span> R <span class="token punctuation">.</span> layout <span class="token punctuation">.</span> activity_counter <span class="token punctuation">)</span>           btnIncrease <span class="token punctuation">.</span> <span class="token function">setOnClickListener</span> <span class="token punctuation">{</span>             CounterAction <span class="token punctuation">.</span> <span class="token function">increaseAction</span> <span class="token punctuation">{</span> store <span class="token punctuation">.</span> <span class="token function">dispatch</span> <span class="token punctuation">(</span> it <span class="token punctuation">)</span> <span class="token punctuation">}</span>         <span class="token punctuation">}</span>           btnDecrease <span class="token punctuation">.</span> <span class="token function">setOnClickListener</span> <span class="token punctuation">{</span>             CounterAction <span class="token punctuation">.</span> <span class="token function">decreaseAction</span> <span class="token punctuation">{</span> store <span class="token punctuation">.</span> <span class="token function">dispatch</span> <span class="token punctuation">(</span> it <span class="token punctuation">)</span> <span class="token punctuation">}</span>         <span class="token punctuation">}</span>                  <span class="token comment">// btnUndo.setOnClickListener {</span>         <span class="token comment">//     store.dispatch(KduxDevToolAction.UNDO)</span>         <span class="token comment">// }</span>           <span class="token comment">// btnRedo.setOnClickListener {</span>         <span class="token comment">//     store.dispatch(KduxDevToolAction.REDO)</span>         <span class="token comment">// }</span>           <span class="token comment">// btnReset.setOnClickListener {</span>         <span class="token comment">//     store.dispatch(KduxDevToolAction.RESET)</span>         <span class="token comment">// }</span>     <span class="token punctuation">}</span>       <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onStart</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>         <span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token function">onStart</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>           store <span class="token punctuation">.</span> <span class="token function">subscribe</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span>     <span class="token punctuation">}</span>       <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onStop</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>         <span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token function">onStop</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>           store <span class="token punctuation">.</span> <span class="token function">unsubscribe</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span>     <span class="token punctuation">}</span>       <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">enhance</span> <span class="token punctuation">(</span> state <span class="token operator">:</span> CounterState <span class="token punctuation">)</span> <span class="token punctuation">{</span>         txtNumber <span class="token punctuation">.</span> text <span class="token operator">=</span> <span class="token string">" <span class="token interpolation"><span class="token delimiter variable">${</span> state <span class="token punctuation">.</span> number <span class="token delimiter variable">}</span></span> "</span>     <span class="token punctuation">}</span> <span class="token punctuation">}</span>

Result

summary

Redux is a tool that helps you manage application statuses. In addition, it helps to separate login functions, making it easy to test.

Hopefully with this article, partly helps you understand how Redux . Good luck.

References

• https://redux.js.org
• https://github.com/htdangkhoa/kdux