ReduxKotlin

ReduxKotlin

  • Getting Started
  • API
  • FAQ
  • Github
  • Need help?

›Basic Tutorial

Introduction

  • Getting Started with Redux
  • Motivation
  • Core Concepts
  • Three Principles
  • Threading
  • Learning Resources
  • Ecosystem
  • Examples

Basic Tutorial

  • Basic Tutorial: Intro
  • Actions
  • Reducers
  • Store
  • Data flow

Advanced Tutorial

  • Advanced Tutorial: Intro
  • Async Actions
  • Middleware

FAQ

  • FAQ Index
  • General
  • Reducers
  • Store Setup
  • Multiplatform

Other

  • Glossary
  • Troubleshooting
  • Feedback

API Reference

  • API Reference
  • createStore
  • createThreadSafeStore
  • createSameThreadEnforcedStore
  • Store
  • applyMiddleware
  • compose

Actions

First, let's define some actions.

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().

Here's an example action which represents adding a new todo item:

data class AddTodoAction(val text: String)
AddTodoAction("Build my first Redux app")

Actions are plain objects.

Note on Javascript Redux

In Javascript Redux, Actions must have a type property that indicates the type of action being performed. ReduxKotlin leverages the type system and the type field is not needed.

We'll add one more action type to describe a user ticking off a todo as completed. We refer to a particular todo by index because we store them in an array. In a real app, it is wiser to generate a unique ID every time something new is created.

data class ToggleTodoAction(val index: Int)

It's a good idea to pass as little data in each action as possible. For example, it's better to pass index than the whole todo object.

Finally, we'll add one more action type for changing the currently visible todos.

data class SetVisibilityFilterAction(val filter: VisibilityFilter)
Note on Action Creators

In the Javascript world there are "Action Creators". There are just functions that create actions. Generally this pattern is not needed with ReduxKotlin due ease of use and conciseness of Kotlin's constructors, however if you find them helpful, go for it!

Source Code

Actions.kt

/*
 * Action types
 */
data class AddTodoAction(val text: String)
data class ToggleTodoAction(val index: Int)
data class SetVisibilityFilterAction(val filter: VisibilityFilter)

/*
 * Other declarations
 */

enum class VisibilityFilters {
  SHOW_ALL,
  SHOW_COMPLETED,
  SHOW_ACTIVE
}

Next Steps

Now let's define some reducers to specify how the state updates when you dispatch these actions!

← Basic Tutorial: IntroReducers →
  • Source Code
    • Actions.kt
  • Next Steps
ReduxKotlin
Docs
Getting StartedCore ConceptsBasicsAdvanced
Community
#redux slackTrello board
More
GitHubStar
Thank you to Dan Abramov and the Redux.js.org documentation authors from which this was forked.
Some icons copyright Font Awesome and Noun Project (Hassan ali, ProSymbols)