wechaty-redux

Wrap Wechaty with Redux Actions & Reducers for Easy State Management

Image Source: Managing your React state with Redux

What is Redux

Redux is a Predictable State Container for JS Apps

Why use Redux with Wechaty

To be write...

What is Ducks

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 { WechatyBuilder }  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 = WechatyBuilder.build({ 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.puppet.id, 'dispatch a ding action'))
// The above code 👆 is exactly do the same thing with the following code 👇 :
Api.operations.ding(store.dispatch)(bot.puppet.id, 'call ding from operations')

Ducks Proposal Style for Wechaty Redux Plugin

import { WechatyBuilder } 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 = WechatyBuilder.build({ 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.puppet.id, 'Ducksify Style ding!')

Redux Actions

See: api/actions.ts

Redux Operations

See: api/operations.ts

Ducks Api

See: api/index.ts

API Docs

• Paka

Links

CQRS

1. Command–query separation

Chatbot in Redux

1. Building bots with Redux
2. BotBuilder v3 Node.js bot with Redux state management
3. 🐺 Declarative development for state driven dynamic prompt flow
4. Botbuilder Redux Middleware
5. Botbuilder Redux Common Package

Redux Tools

1. Redux DevTools
2. Remote Redux DevTools
3. Using Redux DevTools in production
4. Video - Getting Started with Redux Dev Tools

Redux Talks

• Dan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015
• Dan Abramov - The Redux Journey at react-europe 2016
• Debugging javascript applications in production - Mihail Diordiev

Redux Middleware

• Redux Middleware
• React tips — How to create a Redux Middleware Throttle

Redux Enhancers

• SO: Redux enhancer example
• Creating a Store with Enhancers​

Articles

1. Setting Up a Redux Project With Create-React-App
2. Redux is half of a pattern

Useful Modules

1. redux-automata - Finite state automaton for Redux.

History

main

v1.20 (Mar 7, 2022)

1. Refactoring all events with breaking changes for better CQRS Wechaty support.
2. Refactoring the events name convension: from eventName to EVENT_NAME

v1.0 (Oct 28, 2021)

Release v1.0 of Wechaty Redux (thanks @mukaiu)

v0.5

1. Upgrade RxJS version from 6 to 7.1
2. ES Modules support

v0.2 (Jun 2, 2020)

Initial version. Requires [email protected] or above versions.

1. WechatyRedux Plugin is ready to use.
2. API follows the Ducks specification.

v0.0.1 (Apr 19, 2020)

Decide to build a Redux Plugin for Wechaty.

Related Projects:

1. A library that exposes matrix-js-sdk state via Redux
2. A library for managing network state in Redux
3. How to setup Redux for a REST api
4. Redux middleware for calling an API

Author

Huan LI (李卓桓) [email protected]

Copyright & License

• Code & Docs © 2020 Huan (李卓桓) <[email protected]>
• Code released under the Apache-2.0 License
• Docs released under Creative Commons