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

标签 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 的文件并为此 reducer 创建一个选择器, 有人可以帮我为这个特定方法编写选择器吗?

PS:我已经提到了Reselect Documentation但我无法让它发挥作用。

最佳答案

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

所以这意味着您在这里得到的参数将是 alertMessage

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

const alertMessage = state => state.alert

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

如果您只想获取警报,则只需返回该警报即可。我认为您在文档中指出的有关税收的示例清楚地显示了预期的输入应该是什么,以及您将收到的函数输入是什么

关于javascript - 如何将 Reselect 集成到我的 React + Redux 应用程序中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51835209/

相关文章:

javascript - Rxjs 观察对象更新变化

javascript - jqvmap 通过 onLabelShow 改变 hoverColor

reactjs - 模拟 React useRef 或带有 enzyme 和 Jest 的功能组件内的函数?

angular - NgRx 通过 dispatch 方法传递 payload 来更新 store

javascript - jQuery UI 对话框链接

javascript - react 和多个表单字段

javascript - 一次更新设置多个 Ramda 镜头

reactjs - 订阅 React 组件中的 redux 操作

javascript - 用于依赖状态切片的 Redux reducer/state-shape 设计

javascript - 为图像添加 Medium.com 样式缩放