【问题标题】:How to integrate Reselect in my React + Redux application?如何在我的 React + Redux 应用程序中集成 Reselect?
【发布时间】:2019-01-20 22:39:34
【问题描述】:

我正在实现 React + Redux 应用程序并发现将 Reselect 集成到我的应用程序中的困难;

下面是我的代码

store.js

  import "regenerator-runtime/runtime";
  import { createStore, applyMiddleware } from 'redux';
  import createSagaMiddleware  from 'redux-saga';
  import { createLogger } from 'redux-logger';
  import rootReducer from '../_reducers';
  import rootSaga from '../_sagas';

  const loggerMiddleware = createLogger();

  const sagaMiddleware = createSagaMiddleware()

  export const store = createStore(

      rootReducer,
      applyMiddleware(
          sagaMiddleware,
          loggerMiddleware
      )

  );

  sagaMiddleware.run(rootSaga)

action.js

  import { alertConstants } from '../_constants';

  export const alertActions = {
      successRequest,
      successResponse,
  };

  function successRequest() {
      return { type: alertConstants.SUCCESS_REQUEST };
  }

  function successResponse(message) {
      return { type: alertConstants.SUCCESS_RESPONSE, message };
  }

reducer.js

  import { alertConstants } from '../_constants';

  export function alert(state = {}, action){
    switch (action.type) {
     case alertConstants.SUCCESS_RESPONSE:
       return {
           message: action.message
       };
       default:
           return state 
    }
  }

这可能是我的 selector.js,但它不起作用!

  import { createSelector } from 'reselect';

  const alertMessage = state => state.alert

  export const makeGetAlertMessage = createSelector(
     alertMessage,
     message => state.alert.message
  )

错误:未捕获的 ReferenceError:未定义状态

我应该有一个名为selector.js 的文件并为此reducer 创建一个选择器, 谁能帮我为这个特定的方法编写选择器?

PS:我已经推荐了Reselect Documentation,但我无法让它工作。

【问题讨论】:

  • 我既没有看到创建选择器的尝试,也没有看到您可能会遇到什么问题,甚至您的目标是什么。你希望你的选择器在这个时候给你什么?
  • @Icepickle 我想用reselect获取alertreducer的数据。
  • @Icepickle 我也在我的问题中更新了我的selector.js
  • 确定它不起作用,state 变量是从哪里作为createSelector 函数中第二个参数的一部分出现的?不应该只是message => message.message吗?
  • @Icepickle 好的,我尝试给 message => message.message 但它给了我一个错误 => Cannot read property 'message' of undefined

标签: javascript reactjs redux react-redux reselect


【解决方案1】:

根据我在文档中阅读的内容,createSelector 将使用其函数的最后一个参数来传递创建选择器中的先前参数。

所以这意味着你在这里得到的论点将是alertMessage的结果

import { createSelector } from 'reselect';

const alertMessage = state => state.alert

export const makeGetAlertMessage = createSelector(
  alertMessage,
  alert => alert
)

如果您只想获得alert,您可以退回那个。我认为您在文档中指出的关于税收的示例清楚地显示了预期的输入应该是什么,以及您将收到什么作为您的函数的输入

【讨论】:

猜你喜欢
  • 2019-09-27
  • 1970-01-01
  • 1970-01-01
  • 2017-03-13
  • 2020-09-20
  • 2020-01-04
  • 2021-10-26
  • 2017-11-12
  • 2019-03-19
相关资源
最近更新 更多