我决定创建 reducer 和 Action 工厂,这样我就不会再重复代码了。 reducer 厂运转良好。事情是这样的:
const initialState = {
loading: false,
error: null,
data: [],
entity: null,
query: null
}
const baseReducer = (name = '') => {
return (state = initialState, action) => {
switch(action.type) {
case `FETCH_ALL_${name}_BEGIN`:
case `FETCH_ONE_${name}_BEGIN`:
return {
...state,
loading: true
}
case `FETCH_ALL_${name}_ERROR`:
case `FETCH_ONE_${name}_ERROR`:
return {
...state,
loading: false,
error: action.payload.error
}
case `FETCH_ALL_${name}_SUCCESS`:
return {
...state,
loading: false,
data: action.payload.data
}
case `FETCH_ONE_${name}_SUCCESS`:
return {
...state,
loading: false,
entity: action.payload.data
}
default:
return state;
}
}
}
不幸的是,如果我向 Action 创建者传递任何参数,他们就无法工作。 这是我的实现:
import axios from 'axios';
export const actionFactory = (name, action, thunk) => () => {
return dispatch => {
console.log('this one here does not work');
dispatch({
type: `${action}_${name}_BEGIN`
}
);
return dispatch(thunk)
.then(response => {
dispatch({
type: `${action}_${name}_SUCCESS`,
payload: {
data: response.data
}
})
})
.catch(error => {
dispatch({
type: `${action}_${name}_FAILURE`,
payload: {
error: error.message
}
})
});
}
}
这是我的两个行动。第一个工作正常,但第二个没有达到行动工厂的实现。我不知道为什么会发生这种情况,但这与传递参数有关。
export const fetchUsers = actionFactory('USERS', 'FETCH_ALL', () => {
return axios.get('http://localhost:8000/api/user')
});
export const fetchUser = (body) => actionFactory('USERS', 'FETCH_ONE', () => {
return axios.get('http://localhost:8000/api/user/' + body);
})
当我在组件中调用它们时,第一个返回所有用户,第二个根本不运行。 Console.log 语句不起作用。有什么想法我能做些什么吗?我厌倦了重复代码,并且由于 reducer 工厂可以工作,所以我现在不想离开它。
最佳答案
您正在柯里化(Currying)第二个actionFactory(第二个actionFactory在调用时返回一个函数)。
所以对于第一个 fetchUsers() 就可以了。
对于第二个,您需要在传递 body 参数后调用返回的函数。那将是:
fetchUser(body)()
关于javascript - Redux 操作工厂不适用于参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52199301/