如何将Reselect集成到我的React + Redux应用程序中?

时间:2018-08-14 06:44:09

标签: javascript reactjs redux react-redux reselect

我正在实现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
  )

错误: 未捕获的参考错误:状态未定义

我应该有一个名为selector.js的文件,并为此减速器创建一个选择器, 有人可以帮我为这种特定方法编写选择器吗?

PS:我已经介绍了Reselect Documentation,但无法使其正常工作。

1 个答案:

答案 0 :(得分:1)

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

因此,这意味着您到达此处的参数将是alertMessage

的结果
import { createSelector } from 'reselect';

const alertMessage = state => state.alert

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

如果您只想获取alert,则只需返回该值即可。我认为您在文档中指出的有关税款的样本清楚地表明了预期的输入内容,以及作为功能输入内容所收到的信息