将Redux状态绑定到对象

Question

Is there an established way to bind a redux state to an object?

I want to do something like this:

MyApi.setStore(myReduxStore, 'stateVar')

I've played with passing various get/set actions and store listeners but it's a mess.

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

The way to do api calls in redux is to use a middleware like redux-thunk or redux-saga . That way you separate the api call from redux and just dispatch an action when the result is ready.

Example of an API call from redux-saga readme:

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;

Then your reducer will just set loading state to true on "USER_FETCH_REQUESTED", update the state on "USER_FETCH_SUCCEEDED" and set some error state on "USER_FETCH_FAILED".