Question

我正在研究ReactJS应用程序，并使用Redux进行状态管理。我也在使用Redux Saga。自最近两天以来，我一直陷入困境，但经过大量努力，仍然无法解决。

在我的React应用程序中，我进行了REST API调用，并将响应将其保存在reducer中以进行名为“ GET_TRADES_MOVED_RESPONSE_ACTION”的操作

我有一个单独的文件，用于保留如下所示的所有操作：-

import {createActions} from "redux-actions";
export const {
  getTradesMovedResponseAction,
} =
createActions(  
  "GET_TRADES_MOVED_RESPONSE_ACTION",
);

以下是我的reducer.js：-

import {handleAction, handleActions} from "redux-actions";
import {isEmpty} from "ramda";
import {extractTableSorting} from "../components/helper";

import {  
  getTradesMovedResponseAction,
} from "./actions";
export const tradesMovedResponse = handleAction(getTradesMovedResponseAction, 
  (state, {payload: {response}}) => {        
    return [...state, response];
  }, []
);

export const resetResponse = handleAction(getTradesMovedResponseAction, 
  (state, action) => {
      if(action.type === 'GET_TRADES_MOVED_RESPONSE_ACTION'){
        console.log('inside if block');
        state = null;            
        return getTradesMovedResponseAction(null);    
      }      
  },[]
);

export const getTradesMovedResponse = (state, props) => state.tradesMovedResponse;
export const resetResponseAction = (state, props) => state.resetResponse;

当我调用REST API时，我可以将响应保存在名为 tradesMovedResponse 的化简器中，如下所示：-

Saga：-

export function* moveTradeToPendingQueue() {
  yield takeEvery("MOVE_TRADE_TO_PENDING_QUEUE", function* ({ payload: { tradeIds, message, longMessage } }) {
    try {
      const response = yield call(TradeButlerApi.postMoveTrade, tradeIds, message, longMessage);
      if (response) {        
        yield all([put(Actions.getTradesMovedResponseAction({response}))
        ]);
      } else {
        yield put(Actions.openInfoModal());
      }
    } catch (error) {
      console.error(error);
    }
  });
}

API调用：-

export const postMoveTrade= (tradeIds, message, longMessage) => 
  fetch(`${_config.API_URL}/api/test/movingTrades`, {
    ...FETCH_OPTIONS,
    method: "POST",
    body: JSON.stringify({
      data: {
        tIds,
        message,
        longMessage,
      },
    }),
  }).then(handleErrors)
  .then(response => response.json()).then(json => json.data).then(data => data.message)
  .catch(console.error);

现在，在我的组件上，我可以轻松地映射此reducer并将HTTP响应消息显示给最终用户，如下所示：-

组件：-

const mapStateToProps = (state) => ({
  tradesMovedResponse: getTradesMovedResponse(state),
  resetResponse: resetResponseAction(state),
});
---
---

let httpResponse = this.props.tradesMovedResponse;
    if ('' != this.props.tradesMovedResponse) {
      httpResponse = <div className="isa_info">{this.props.tradesMovedResponse} 
      </div>      
      this.props.resetResponse;
    }   
    return (
      <div className="trade-actions-container">
        <div className="form-container comment-container">          
          {httpResponse}

问题是在reducer中定义的状态始终存在，因此{httpResponse}始终显示对最终用户的HTTP响应。

我尽力为该特定操作重置Redux存储，即GET_TRADES_MOVED_RESPONSE_ACTION（如果您在化简文件中看到上述代码，即resetResponse并在我的组件中调用this.props.resetResponse;），但全部都是如此。什么都没发生。

以下是index.js文件，仅供参考：-

---
---
// create the saga middleware
const sagaMiddleware = createSagaMiddleware();
const tradeApp = combineReducers({
  trades,
  ui,
  tradesMovedResponse,
  resetResponse});

const store = createStore(
    tradeApp,
    composeEnhancers(applyMiddleware(sagaMiddleware)),
);

function* rootSaga() {
  yield all([
    getTradesEvery(),
    tradesSaga(),
  ]);
}
sagaMiddleware.run(rootSaga);
store.dispatch(initApp());

如果我在组件类中做错了任何事情，或者我的reducer resetResponse有任何问题，请帮助我吗？

欢呼

无法在ReactJS应用程序中为给定的reducer操作从Redux存储中清除状态

0 个答案: