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 for JS Apps

Why use Redux with Wechaty#

To be write...

What is Ducks#

Ducksify Extension

See Ducks

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

Last updated on by Leo_chen