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
– Icepickle, Commented Aug 14, 2018 at 7:01
@Icepickle I want to get the data of alert reducer using reselect. — Madhu
– Madhu, Commented Aug 14, 2018 at 7:02
@Icepickle also I have updated my selector.js in my question. — Madhu
– Madhu, Commented Aug 14, 2018 at 7: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
– Icepickle, Commented Aug 14, 2018 at 7:14
@Icepickle okay, I tried giving message => message.message but it gave me an error => Cannot read property 'message' of undefined — Madhu
– Madhu, Commented Aug 14, 2018 at 7:19

Icepickle · Accepted Answer · 2018-08-14 07:33:05Z

1

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

answered Aug 14, 2018 at 7:33

Icepickle

12.8k3 gold badges38 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tpdietz Over a year ago

Its worth noting creating selectors like this does not provide any performance benefit. please see this stackoverflow.com/questions/47155868/…

Collectives™ on Stack Overflow

How to integrate Reselect in my React + Redux application?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related