我正在使用 react-native
+ redux
+ immutable
构建 Android 应用程序
我这样构建我的应用程序
/src
-/components
-/actions (where I have action types and actions)
-/reducers
-/api (I'm not sure if I'm doing this right)
好的,所以我有一个操作需要使用 fetch 进行 API 调用,如下所示:
import * as types from './casesTypes'
export function getCases() {
return {
type: types.GET_CASES
}
}
这是案例缩减程序:
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
}
}
所以,问题是我真的不明白,我应该在哪里进行API调用,以便在reducer中我可以将我的初始状态与我从API调用中收到的内容合并?
最佳答案
您的应用结构是健全的。
我还建议使用 redux-thunk 来处理调度。以下是它在您的情况下的工作原理:
假设您的状态树中有“案例”。 我会按照您的建议将 API 调用放入您的操作中以获取新案例:
import * as types from './casesTypes'
export function getCases() {
return fetch(...)
...
.then((json) => {
dispatch({
type: types.RECEIVED_CASES,
isLoading: false,
cases: json,
}
}
现在,在您的 reducer 中,只需获取新分派(dispatch)的操作即可将新案例与状态树合并:
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
}
}
我目前正在使用这个结构,它运行得很好。希望有帮助!
关于reactjs - 我在react-native和redux中处理API调用的地方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38223269/