代码之家 › 专栏 › 技术社区 › Sam

Redux中中间件的访问状态

react-redux redux reactjs

Sam · 技术社区 · 6 年前

我的React/Redux应用程序中有一个中间件,看起来像这样:

export const mymiddleware=(store)=>(next)=>异步(action)=>。{

开关(动作类型){
案例类型。一些行动:
//这里有一些逻辑…
断裂;
}
}
我需要访问这里的状态,以便我可以执行我的逻辑。这个中间件是为处理而设计的。


我想,因为存储被传递到中间件中,所以我可以访问它,但是当我检查存储时,我根本看不到状态。我确实看到了一个getstate()function,但是当我使用它时,它看起来像是在让我获得初始状态,而不是当前状态和其中的数据。


这是我检查时看到的对象:


这是我的商店,以及如何在其中包含中间件:

import createStore,applymiddleware from'redux';
从'redux thunk'导入thunk;
从“.../reducers/root reducer”导入rootreducer;
从“.../middleware/my middleware”导入“mymiddleware”;

导出默认函数configureStore(initialState){

const store=创建存储(
减根剂,
姓名首字母,
applymiddleware(thunk、mymiddleware)
;

退货仓库;
}
如何访问中间件中的状态?

我需要访问这里的状态,这样我就可以执行我的逻辑,这是中间件设计用来处理的。

我想,因为存储被传递到中间件中,所以我可以访问它,但是当我检查存储时,我根本看不到状态。我确实看到了getState()函数,但是当我使用它时,它看起来是在获取初始状态,而不是包含数据的当前状态。

这是store我检查时看到的物体:


以下是我的商店以及如何在其中包含中间件:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/root-reducer';
import { myMiddleware } from '../middleware/my-middleware';

export default function configureStore(initialState) {

    const store = createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk, myMiddleware)
    );

    return store;
}


如何访问中间件中的状态?

1 回复 | 直到 6 年前

Ori Drori 6 年前

如果使用 getState() 在异步回调中(例如,信号响应)。在这种情况下,我使用 setTimeout() 模拟异步操作。

注:

虽然这在理论上可行,但这不是一个好主意。不能保证其他行为不会改变状态。在这个示例中,您可以看到中间件显示了两个已调度操作的结束状态(对于这两个操作)。
关于注释中的讨论——简单的状态更改应该在Reducer中完成,而不是在中间件中。

const { createStore, applyMiddleware } = Redux;

const DEMO_ACTION = 'DEMO_ACTION';

const demoAction = (payload) => ({
  type: DEMO_ACTION,
  payload
});

const myMiddleware = ({ getState }) => (next) => async (action) => {
  setTimeout( // simulates an async action
    () => console.log(action.payload, getState())
  , 0);
   
  next(action);
}

const initialState = { data: [] };

const rootReducer = (state = initialState, { type, payload }) => {
  switch(type) {
    case DEMO_ACTION:
      return {
        ...state,
        data: [...state.data, payload]
      };
  }
  
  return state;
}

const store = createStore(
  rootReducer,
  applyMiddleware(myMiddleware)
);

store.dispatch(demoAction('data1'));
store.dispatch(demoAction('data2'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>