Redux.js - создание промежуточного программного обеспечения для прослушивателя, которое прослушивает отправленные действия thunk

Question

Я пытаюсь создать промежуточное программное обеспечение для прослушивателя с Redux, которое прослушивает отправленные действия thunk.

Цель состоит в том, чтобы при отправке действия промежуточное программное обеспечение делало паузу в процессе и инициировало и другое действие (наблюдатель). я нашел на первый взгляд хорошая библиотека на NPM, но, похоже, мой наблюдатель не хватает отправленного действия. Когда отправляется первое действие, ничего не происходит, кажется, что слушатель даже не сработал.

Я убедился, что мое промежуточное ПО эффективно введено в магазине.

Вот тезисы моего кода:

Reaction.js:

import { createMiddleware } from 'redux-listeners';
const listenMiddleware = createMiddleware(); 

listenMiddleware.addListener(POST_WORD_REQUEST, (dispatch) => {     
  // postFile is the listener action 
  // provided by mapDispatchToProps in an another file
  this.props.postFile(word, base64Data)
})

reduxAction.js:

// postWord is the observed action
export const postWord =  {...}  => {
    dispatch({
      type: POST_WORD_REQUEST,
      status: request
    });
}

middleware.js:

import thunkMiddleware from 'redux-thunk'
import {applyMiddleware} from "redux"

import { createMiddleware } from 'redux-listeners';
const listenMiddleware = createMiddleware();

const middleware = applyMiddleware(
  listenMiddleware,
  thunkMiddleware
)

export default middleware // then createStore(appReducer, initialState, middleware)

Answer 1

Подводя итоги обсуждения, в качестве ответа:

• Обратный вызов, предоставленный экземпляру listenerMiddleware, неправильно использовал this.props, который не существует, потому что он не находится в компоненте
• Похоже, что были созданы два разных экземпляра промежуточного программного обеспечения, и слушатель был добавлен к экземпляру промежуточного программного обеспечения, которое не было подключено к хранилищу.

Теперь, сказав следующее: похоже, вы пытаетесь вызвать поведение в компоненте React на основе отправленного действия Redux. Как вы заметили, это «странный» и не рекомендуемый способ структурирования вашего приложения. Я бы посоветовал найти другой способ сделать что-нибудь, если это возможно.