Redux 动作工厂不适用于参数
Redux action factory does not work with arguments
我决定创建 reducer 和 action 工厂,这样我就不会再重复代码了。减速器厂工作正常。是这样的:
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;
}
}
}
不幸的是,如果我向他们传递任何参数,他们将无法工作。
这是我的实现:
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);
})
当我在一个组件中调用它们时,第一个 returns 所有用户,第二个 运行 根本没有。 Console.log 语句不起作用。有什么想法我能做些什么吗?我厌倦了重复代码,因为 reducer factory 工作我不想现在离开它。
您正在柯里化第二个 actionFactory(第二个 returns 在调用时是一个函数)。
所以对于第一个 fetchUsers() 没问题。
对于第二个,您需要在传递 body 参数后调用返回的函数。那将是:
fetchUser(正文)()
我决定创建 reducer 和 action 工厂,这样我就不会再重复代码了。减速器厂工作正常。是这样的:
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;
}
}
}
不幸的是,如果我向他们传递任何参数,他们将无法工作。 这是我的实现:
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);
})
当我在一个组件中调用它们时,第一个 returns 所有用户,第二个 运行 根本没有。 Console.log 语句不起作用。有什么想法我能做些什么吗?我厌倦了重复代码,因为 reducer factory 工作我不想现在离开它。
您正在柯里化第二个 actionFactory(第二个 returns 在调用时是一个函数)。
所以对于第一个 fetchUsers() 没问题。
对于第二个,您需要在传递 body 参数后调用返回的函数。那将是:
fetchUser(正文)()