Skip to main content

Using Redux with Wechaty

NPM Version NPM Ducksify Extension

Wrap Wechaty with Redux Actions & Reducers for Easy State Management

Wechaty Redux

Image Source: Managing your React state with Redux

Downloads TypeScript

What is Redux​

Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments

Why use Redux with Wechaty​

Redux is used for application state management.

  • makes the state predictable
  • easier to trace which action causes any change
  • makes it easier to test, maintain and debug

What is Ducks​

Ducksify Extension

🦆🦆🦆Ducks is a Reducer Bundles Manager that Implementing the Redux Ducks Modular Proposal with Great Convenience.

Image Credit: Alamy

Ducks Modular Proposal Re-Ducks Extended Ducksify Extension

Ducks offers a method of handling redux module packaging, installing, and running with your Redux store, with middleware support.

See Ducks is a Reducer Bundles Manager that Implements the Redux Ducks Modular Proposal with Great Convenience. It offers a method of handling redux module packaging, installing, and running with your Redux store, with middleware support.

Usage​

Install​

npm install wechaty-redux

Vanilla Redux with Wechaty Redux Plugin​

Vanilla Redux means using plain Redux without any additional libraries like Ducks.

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

// 1. Configure Store with RxJS Epic Middleware for Wechaty Ducks API

const epicMiddleware = createEpicMiddleware()

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

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

// 2. Instanciate Wechaty and Install Redux Plugin

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

// 3. Using Redux Store with Wechaty Ducks API!

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

store.dispatch(Api.actions.ding(bot.id, 'dispatch a ding action'))

// The above code 👆 is exactly do the same thing with the following code 👇 :

Api.operations.ding(store.dispatch)(bot.id, 'call ding from operations')

Ducks Proposal Style for Wechaty Redux Plugin​

import { Wechaty }  from 'wechaty'
import { Ducks }    from 'ducks'
import {
  WechatyRedux,
  Api,
}                   from 'wechaty-redux'

// 1. Ducksify Wechaty Redux API

const ducks = new Ducks({ wechaty: Api })
const store = ducks.configureStore()

// 2. Instanciate Wechaty with Redux Plugin

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

// 3. Using Redux Store with Wechaty Ducks API!
//  (With the Power of Ducks / Ducksify)

const wechatyDuck = ducks.ducksify('wechaty')

store.subscribe(() => console.info(store.getState()))
wechatyDuck.operations.ding(bot.id, 'Ducksify Style ding!')

Ducks Api​

Ducksify Extension

Ducks is very easy to use, because one of the goals of designing it is to maximize the convenience. To know more about the Ducks Api,please refer here.