---
title: Redux-Based Status Management
---

## Redux-Based Status Management

Smart MiniApp provides the status management solution based on Redux to help you process complex business data. You can select this solution based on your business requirements.

### Step 1

Install the required Redux dependency packages and middleware.

```shell
npm i redux --save
npm i redux-thunk --save
npm i redux-logger --save
```

### Step 2

Create `store.js`.

```js
import reducer from './reducer/index';
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import thunkMiddleware from 'redux-thunk';

// Creates `redux store`.
export const store = createStore(
  reducer,
  applyMiddleware(
    logger, // Debugs state in the Tuya MiniApp IDE.
    thunkMiddleware, // Processes asynchronous actions.
  ),
);
```

### Step 3

Create `actions`.

```js
// This is a synchronous action.
export const INCREASE = 'INCREASE';

export const increase = {
  type: INCREASE,
};

export const addCountAsync = () => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch({ type: 'GET_DATA' });
    }, 2000);
  };
};
```

### Step 4

Create `reducer`.

```js
import { combineReducers } from 'redux';

// The `reducer` that processes a synchronous action in this example.
export const disposeIncrease = (state = 0, action) => {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    default:
      return state;
  }
};

// The `reducer` that processes an asynchronous action in this example.
const preState = {};
export const disposeFetch = (state = preState, action) => {
  switch (action.type) {
    case 'GET_DATA':
      return {
        ...state,
        status: 'success',
      };
    default:
      return state;
  }
};

// Combined in the state structure.
export default combineReducers({
  theIncreasingNo: disposeIncrease,
  asyncData: disposeFetch,
});
```

### Example

#### page1 TYML

```xml

<view class="container">
  <view class="userinfo">
    <button bind:tap="testSyncAction">
      Test Sync Action and Tap to Plus 1
    </button>
    <text class="userinfo-nickname">{{number}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{syncData}}</text>
  </view>
</view>

```

#### page1 js

```js
import { store } from '../../store';
import { increase, addCountAsync } from '../../actions/index';

const { dispatch, subscribe, getState } = store;
Page({
  data: {
    syncData: 'Hello World',
    number: '0',
  },
  onLoad: function () {
    const _this = this;
    subscribe(() => {
      const {
        asyncData: { status },
        theIncreasingNo,
      } = getState();
      _this.setData({
        syncData: `Request status: ${status}`,
        number: theIncreasingNo,
      });
    });
  },

  testSyncAction: function () {
    dispatch(addCountAsync());
    dispatch(increase);
  },
});
```

You can use `triggerEvent` to trigger an action in a custom component.

#### customComponent TYML

```xml
<button bind:tap="click">Tap to Trigger Page Action</button>
```

#### customComponent js

```js
Component({
  click: function () {
    this.triggerEvent('xlComponentClick', void 0, {
      bubbles: true,
    });
  },
});
```

#### page1 TYML

```xml
<xlComponent bind:xlComponentClick="testSyncAction"></xlComponent>
```

If you have any problem during the development, you can contact Tuya MiniApp team for troubleshooting.