如何将 Reselect 集成到我的 React + Redux 应用程序中?
How to integrate Reselect in my React + Redux application?
我正在实施 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 但我无法让它工作。
根据我在文档中阅读的内容,createSelector
将使用其函数的最后一个参数来传递创建选择器中的先前参数。
所以这意味着你在这里得到的论点将是 alertMessage
的结果
import { createSelector } from 'reselect';
const alertMessage = state => state.alert
export const makeGetAlertMessage = createSelector(
alertMessage,
alert => alert
)
如果您只想获得 alert
,您可以 return 那个。我认为您在文档中指出的关于税收的示例清楚地显示了预期的输入应该是什么,以及您将收到什么作为函数的输入
我正在实施 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 但我无法让它工作。
根据我在文档中阅读的内容,createSelector
将使用其函数的最后一个参数来传递创建选择器中的先前参数。
所以这意味着你在这里得到的论点将是 alertMessage
import { createSelector } from 'reselect';
const alertMessage = state => state.alert
export const makeGetAlertMessage = createSelector(
alertMessage,
alert => alert
)
如果您只想获得 alert
,您可以 return 那个。我认为您在文档中指出的关于税收的示例清楚地显示了预期的输入应该是什么,以及您将收到什么作为函数的输入