Skip to main content

Vanilla Redux with Wechaty Redux Plugin

Powered by Wechaty TypeScript

Vanilla Redux means using plain Redux without any additional libraries like Ducks and for using vanilla-redux with wechaty, Wechaty Redux plugin is required.

In this tutorial, you will learn how to use vanilla-redux with Wechaty.

Requirements​

  1. Node.js v16+
  2. Wechaty v0.40+
  3. Wechaty Redux

Getting started​

Before getting started, make sure you have Node.js installed on your system. If you do not have Node.js installed (or have a version below 12), then you need to install the latest version of Node.js by following the links below:

Node.js installation docs

Installation guide for Node.js on other platforms can be found here.

You can head over to the Building the bot section to learn how to build the bot on your own.

Otherwise, if you just want to try out the bot on your local system, follow the steps below:

1. Clone the repository​

Use the following commands to clone the GitHub repository and navigate to the directory:

git clone https://github.com/wechaty/wechaty-redux.git
cd wechaty-redux

2. Install dependencies​

You can install the npm packages required for running the bot, using this command:

npm install

3. Run the bot​

First, you have to export/set the environment variables:

export WECHATY_LOG=verbose
export WECHATY_PUPPET=wechaty-puppet-mock

Run the bot using the following command:

npx ts-node examples/vanilla-redux.ts

There are various Wechaty puppets available, you can know more about them here.

Building the bot​

Let's get started with building the Wechaty Redux bot using vanilla-redux.

1. Initialize project​

Create a new folder called redux-bot and move into that directory:

mkdir redux-bot
cd redux-bot

Use the following command to initialize an npm project:

npm init -y

2. Install dependencies​

For building the bot, you will require the following dependencies:

You can install these dependencies by running the following command:

npm install wechaty
npm install redux wechaty-redux redux-observable ts-node

You will also need to add dependencies for using any Wechaty Puppet which helps to integrate Wechaty with various instant messaging (IM) systems (such as WeChat, Whatsapp, and Gitter):

  1. If you want to use WhatsApp, install wechaty-puppet-whatsapp:

    npm install wechaty-puppet-whatsapp

  2. If you want to use WeChat, you can try the following puppets:

    • Web Protocol: Install wechaty-puppet-wechat:

      npm install wechaty-puppet-wechat

    • iPad Protocol:

      • padlocal: Install wechaty-puppet-padlocal:

        npm install wechaty-puppet-padlocal

        Then get a token like puppet_padlocal_XXX, know more about puppet service padlocal here.

      • paimon: Install wechaty-puppet-service:

        npm install wechaty-puppet-service

        Then get a token like puppet_paimon_XXX, know more about puppet service paimon here.

  3. If you want to use WeCom, install wechaty-puppet-service:

    npm install wechaty-puppet-service

    Then get a token like puppet_wxwork_XXXXX, more about puppet service wxwork here.

You can find more information about the puppets here.

3. Write code for bot​

Start by creating a new file redux-bot.ts. You will be writing the code here.

Follow the steps below to build the bot:

  1. Import the required packages in the redux-bot.ts file:

    import {
      createStore,
      applyMiddleware,
    }                           from 'redux'
    import {
      createEpicMiddleware,
      combineEpics,
    } from 'redux-observable'
    import { Wechaty }          from 'wechaty'
    import {
      WechatyRedux,
      Duck,
    }                           from 'wechaty-redux'

  2. Define an asynchronous main() function, and call it. You will be adding code for the bot in this function.

    async function main() {
        // Add code here
    }

    main()
      .catch(console.error)

  3. Configure Store with RxJS Epic Middleware for Wechaty Ducks API:

    const epicMiddleware = createEpicMiddleware()

    const store = createStore(
      Duck.default,
      applyMiddleware(epicMiddleware),
    )

    const rootEpic = combineEpics(...Object.values(Duck.epics))
    epicMiddleware.run(rootEpic)

  4. Instantiate Wechaty and Install Redux Plugin:

    const bot = Wechaty.instance({ puppet: 'wechaty-puppet-mock' })
    bot.use(WechatyRedux({ store }))

  5. Start the bot:

    await bot.start()
    console.info('Wechaty has started with Redux enabled.')

  6. Using Redux Store with Wechaty Ducks API:

    store.subscribe(() => console.info(store.getState()))

    store.dispatch(Duck.actions.ding(bot.id, 'dispatch a ding action'))
    // The above code 👆 is exactly do the same thing with the following code 👇 :
    // Duck.operations.ding(store.dispatch)(bot.id, 'call ding from operations')

Running the bot​

In order to run the bot, first you have to export/set an environment variable with the type of puppet to use:

export WECHATY_LOG=verbose
export WECHATY_PUPPET=wechaty-puppet-wechat

# For using WhatsApp:
# export WECHATY_PUPPET=wechaty-puppet-whatsapp

# For using WeCom:
# export WECHATY_PUPPET=wechaty-puppet-service
# export WECHATY_PUPPET_SERVICE_TOKEN="puppet_wxwork_XXXXX"

If you are using WeCom, you can get token from puppet service wxwork.

Run the bot using the following command:

ts-node redux-bot.ts

References​