How to integrate Reselect in my React + Redux application?

Question

I am implementing React + Redux application and finding difficulties to integrate Reselect into my application;

Below are my codes

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 
    }
  }

this could be my selector.js, but it wont work!

  import { createSelector } from 'reselect';

  const alertMessage = state => state.alert

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

Error: Uncaught ReferenceError: state is not defined

I should have a file named selector.js and create a selector for this reducer, Could anyone please help me write selectors for this particular method?

PS: I have referred the Reselect Documentation but I am not able to make it work.

I'm neither seeing an attempt for creating the selector, nor where you might be stuck or even what your goal would be. What do you hope your selectors would give you at this time? — Icepickle, Aug 14 '18 at 07:01
@Icepickle I want to get the data of `alert` reducer using reselect. — Madhu, Aug 14 '18 at 07:02
@Icepickle also I have updated my `selector.js` in my question. — Madhu, Aug 14 '18 at 07:07
sure it won't work, from where does the `state` variable come as part of your second argument in the `createSelector` function? Shouldn't it just be `message => message.message`? — Icepickle, Aug 14 '18 at 07:14
@Icepickle okay, I tried giving `message => message.message` but it gave me an error => `Cannot read property 'message' of undefined` — Madhu, Aug 14 '18 at 07:19
it worked after changing to `export const makeGetAlertMessage = createSelector( alertMessage, alert => alert )` — Madhu, Aug 14 '18 at 07:24
@Icepickle can you please post that as answer with a description, It will help many people. — Madhu, Aug 14 '18 at 07:26

score 1 · Accepted Answer · answered Aug 14 '18 at 07:33

From what I have read in the documentation, the createSelector will use the last argument of it's function to pass the previous arguments in the create selector.

So this would mean the argument you are getting here, would be the result of alertMessage

import { createSelector } from 'reselect';

const alertMessage = state => state.alert

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

If you just want to get the alert, you can just return that one. I think the sample you have pointed out in the documentation, concerning the tax, clearly shows what should be the expected input, and what you would receive as an input for your function

Its worth noting creating selectors like this does not provide any performance benefit. please see this https://stackoverflow.com/questions/47155868/reselect-does-it-ever-make-sense-to-create-a-memorized-selector-which-is-just — tpdietz, Aug 15 '18 at 00:53

How to integrate Reselect in my React + Redux application?

1 Answers1