将 redux 状态绑定到对象

Question

是否有一种既定的方法可以将 redux 状态绑定到对象？

我想做这样的事情：

MyApi.setStore(myReduxStore, 'stateVar')

我玩过传递各种 get/set 操作和存储侦听器，但它一团糟。

MyApi.getState = () => store.dispatch(getAction())
MyApi.setState = (state) => store.dispatch(setAction(state))
let currentState
store.subscribe(() => {
  let previousState = currentState
  currentState = store.getState().stateVar
  if(previousState !== currentState) {
    MyApi.stateListener(currentState)
  }
})

Answer 1

在 redux 中进行 api 调用的方法是使用像 redux-thunk 或 redux-saga 这样的中间件。这样你就可以将 api 调用与 redux 分开，并在结果准备好时调度一个动作。

来自 redux-saga 自述文件的 API 调用示例：

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import Api from '...'

// worker Saga: will be fired on USER_FETCH_REQUESTED actions
function* fetchUser(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }
}

/*
  Starts fetchUser on each dispatched `USER_FETCH_REQUESTED` action.
  Allows concurrent fetches of user.
*/
function* mySaga() {
  yield takeEvery("USER_FETCH_REQUESTED", fetchUser);
}

/*
  Alternatively you may use takeLatest.

  Does not allow concurrent fetches of user. If "USER_FETCH_REQUESTED" gets
  dispatched while a fetch is already pending, that pending fetch is cancelled
  and only the latest one will be run.
*/
function* mySaga() {
  yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
}

export default mySaga;

然后你的 reducer 只会在 "USER_FETCH_REQUESTED" 上将加载状态设置为 true，在 "USER_FETCH_SUCCEEDED" 上更新状态并在 "USER_FETCH_FAILED" 上设置一些错误状态。