React/Redux 如何访问网络服务中的状态

Question

我创建了一个处理 API 调用的网络服务组件。我想从更新store 的其他组件中检索状态。 我在获取状态时遇到了麻烦，所以我开始使用 Redux，但我之前没有使用过 Redux，并且仍在尝试找到一种将状态传递给 NetworkService 的方法。任何帮助都会很棒，谢谢！

这是我的 NetworkService.js

import RequestService from './RequestService';
import store from '../store';

const BASE_URL = 'api.example.com/';
const REGION_ID = //Trying to find a way to get the state here

// My attempt to get the state, but this unsubscribes and
// doesnt return the value as it is async
let Updated = store.subscribe(() => {
   let REGION_ID = store.getState().regionId;
}) 

class NetworkService {

    getForecast48Regional(){
        let url =`${BASE_URL}/${REGION_ID }`;
        return RequestService.getRequest(url)
    }
}

export default new NetworkService();

store.js

import {createStore} from 'redux';

const initialState = {
  regionId: 0
};
const reducer = (state = initialState, action) => {

  if(action.type === "REGIONAL_ID") {
     return {
        regionId: action.regionId
      };
    }
    return state;
}
const store = createStore(reducer);

export default store;

我的文件夹层次结构如下所示：

-App
----Components
----NetworkService
----Store

Answer 1

不要直接导入 store。出于这些原因，请使用 thunks/sagas/whatever。

• NetworkService 不应该知道下面的任何事情。
• Thunks 只知道 NetworkService 和普通的 redux actions。
• 组件只知道 thunks 和 store（不是 store 本身，而是 Redux 的选择器，mapStateToProps，mapDispatchToProps）。
• Store 只知道普通的 redux actions。

知道 - 例如import的。

//////////// NetworkService.js
const networkCall = (...args) => fetch(...) // say, returns promise

//////////// thunks/core/whatever.js
import { networkCall } from 'NetworkService'

const thunk = (...args) => (dispatch, getState) => {
  dispatch(startFetch(...args))

  const componentData = args
  // I'd suggest using selectors here to pick only required data from store's state
  // instead of passing WHOLE state to network layer, since it's a leaking abstraction
  const storeData = getState()

  networkCall(componentData, storeData)
    .then(resp => dispatch(fetchOk(resp)))
    .catch(err => dispatch(fetchFail(err)))
}

//////////// Component.js
import { thunk } from 'thunks/core/whatever'

const mapDispatchToProps = {
  doSomeFetch: thunk,
}

const Component = ({ doSomeFetch }) =>
  <button onClick={doSomeFetch}>Do some fetch</button>

// store.subscribe via `connect` from `react-redux`
const ConnectedComponent = connect(..., mapDispatchToProps)(Component)