TreeviewCopyright © aleen42 all right reserved, powered by aleen42

Introduction Back

In Redux, the whole state of your app is stored in an object tree inside a single store.

The only way to change the state tree is to emit an action, which will describe what happens. Like this:

import { createStore } from 'redux';

 * This is a reducer, a pure function with (state, action) => state signature.
 * It describes how an action transforms the state into the next state.
 * The shape of the state is up to you: it can be a primitive, an array, an object,
 * or even an Immutable.js data structure. The only important part is that you should
 * not mutate the state object, but return a new object if the state changes.
 * In this example, we use a `switch` statement and strings, but you can use a helper that
 * follows a different convention (such as function maps) if it makes sense for your
 * project.
function counter(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
        return state + 1;
    case 'DECREMENT':
        return state - 1;
        return state;

 * Create a Redux store holding the state of your app.
 * Its API is { subscribe, dispatch, getState }.
let store = createStore(counter);

 * You can use subscribe() to update the UI in response to state changes.
 * Normally you'd use a view binding library (e.g. Redux) rather than subscribe() directly.
 * However it can also be handy to persist the current state in the localStorage.
store.subscribe(() =>

 * The only way to mutate the internal state is to dispatch an action.
 * The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'INCREMENT' });      /** => 1    */
store.dispatch({ type: 'INCREMENT' });      /** => 2    */
store.dispatch({ type: 'DECREMENT' });      /** => 1    */

As we can see above, state can be only changed by dispatching an action object to a function, which is called Reducer in Redux.

Three Principles

Redux can be described in three fundamental principles:

  • Single source of truth
    • The state of your whole application is stored in an object tree within a single store.
  • State is read-only
    • The only way to change the state is to emit an action, an object describing what happened.
  • Changes are made with pure functions
    • A pure Reducer is to specify how the state tree is transformed by actions.
Empty Comments
Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.