Redux是访问和使用中间件内部状态的最佳方法

时间:2018-10-30 18:02:28

标签: reactjs redux

我有一种情况,我需要使用axios在我的发布请求中向所有端点发送两个参数。这些参数已经在我的商店中。

因此,我创建了一个“中间件”来像这样处理所有请求:

const POST = async (url, body = {}) => {
  const {Token, UserId} = store.getState().User
  const {DeviceIdentifier} = await GetDeviceInfo()
  const data = {AgentId: UserId, DeviceId: DeviceIdentifier, ...body}
  const response = await axios.post(`${BASE_URL}${url}$`, data, {
    headers: {Authorization: `Bearer ${Token}`},
  })

  if (!response.data.Logged) {
    logoutUser()
    return false
  }

  return response
}

但是,我已经阅读了很多文章,说像这样使用getState()并不是一个好主意...

在这种情况下最好的拨叉应该是什么?

非常感谢您!

2 个答案:

答案 0 :(得分:1)

使用redux thunk时,可以提供两个参数dispatchgetState。提供更多参数:

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument({ url, body }))
)

// .withExtraArgument(url) // to supply further one arguments only

然后您可以像这样使用getState

const POST = async (dispatch, getState, {url, body = {}}) => {
  ...
  getState().User

答案 1 :(得分:0)

在中间件中使用getState()很好-这就是为什么它存在的原因!

如果您想阅读一些假想问题的扩展讨论以及我为什么仍然可以接受的原因,那么我的帖子Idiomatic Redux: Thoughts on Thunks, Sagas, Abstraction, and Reusability会提供更多详细信息。