Question

我正在使用redux + immutable + /src -/components -/actions (where I have action types and actions) -/reducers -/api (I'm not sure if I'm doing this right)

构建Android应用

我按照这样构建我的应用

import * as types from './casesTypes'

export function getCases() {
    return {
      type: types.GET_CASES
    }
}

好的，所以我有一个动作，我需要用这样的fetch进行API调用：

const initialState = fromJS({
  isLoading: false,
  cases: null
})
export default function cases(state = initialState, action = {}) {

    switch(action.type) {

        case types.REQUEST_CASES:
          return state.set('isLoading', true)

        case types.RECIVE
          return state.set('cases', //set here the array that I recive from api call)

        default:
          return state
    }
}

这是减速器的情况：

const char*

所以，事情是我真的不明白，我应该在哪里进行API调用，以便在reducer中我可以将我的初始状态与我从API调用中恢复的内容合并？

Answer 1

您的应用结构合理。

我还建议使用redux-thunk来处理调度。以下是它在您的情况下的工作方式：

让我们说你有＆＃39;案例＆＃39;作为州树的一部分。我会按照您建议的方式将API调用放入您的操作中以获取新案例：

import * as types from './casesTypes'

export function getCases() {
    return fetch(...)
             ...
             .then((json) => {
               dispatch({         
                 type: types.RECEIVED_CASES,
                 isLoading: false,
                 cases: json,
               }
}

现在在您的reducer中，只需获取新分派的操作，将新案例与州树合并：

const initialState = fromJS({
  isLoading: false,
  cases: null
})

export default function cases(state = initialState, action = {}) {

    switch(action.type) {

        case types.REQUEST_CASES:
          return state.set('isLoading', true)

        case types.RECEIVED_CASES:
          return Object.assign({}, state, {
            cases: state.cases.merge(action.cases),
          });

        default:
          return state
    }
}

我目前正在使用这种结构，它运作良好。希望有所帮助！

Answer 2

您应该尝试redux-thunk或redux-saga，它们是为处理API调用等异步操作而创建的redux中间件。

查看这个使用了redux-thunk的项目：sound-redux-native

我在react-native和redux中处理API调用的地方

2 个答案: