我使用 React 和 Redux 创建应用程序,我需要获取数据。有什么方法可以重用函数 getData() 和 reducer。我的 Action 是这样的
importing constants
const getDataRequested = () => {
return {
type: GET_DATA_REQUESTED
};
}
const getDataDone = data => {
return {
type: GET_DATA_DONE,
payload: data
};
}
const getDataFailed = () => {
return {
type: GET_DATA_FAILED
};
}
export const getData = () => dispatch => {
dispatch(getDataRequested());
fetch('url')
.then(response => response.json())
.then(data => {
dispatch(getDataDone(data));
})
.catch(error => {
dispatch(getDataFailed(error));
})
}
和 reducer
importing constants
const initialState = {
isLoading: false,
isError: false,
data: [],
}
export default (state=initialState, action) => {
switch (action.type) {
case GET_DATA_REQUESTED:
return { ...state, isLoading: true };
case GET_DATA_DONE:
return { ...state, isLoading: false, data: action.payload };
case GET_DATA_FAILED:
return { ...state, isLoading: false, isError: true}
default:
return state;
}
};
每次我使用不同的 url 获取一些东西时,我都会创建新的 Action 和新的 reducer。可以吗?或者有什么方法可以重用它?
最佳答案
您可以将 url 参数传递给您的 thunk。所以,你可以有这样的东西:
export const getData = (url) => dispatch => {
dispatch(getDataRequested());
fetch(url)
.then(response => response.json())
.then(data => {
dispatch(getDataDone(data));
})
.catch(error => {
dispatch(getDataFailed(error));
})
}
通过这种方式,您可以根据需要分派(dispatch)任意数量的操作,仅更改 url 参数,如下所示:getData('/user'), getData('/products')。
您还可以通过将更多参数传递给 thunk 来自定义将状态存储到 redux 中的方式。所以它可能是这样的:
const getDataDone = data => {
return {
type: GET_DATA_DONE,
payload: data
};
}
export const getData = (url, stateName) => dispatch => {
dispatch(getDataRequested());
fetch(url)
.then(response => response.json())
.then(data => {
dispatch(getDataDone({ stateName: data }));
})
.catch(error => {
dispatch(getDataFailed(error));
})
}
reducer 可能是这样的:
const initialState = {
isLoading: false,
isError: false,
data: {},
}
export default (state=initialState, action) => {
switch (action.type) {
case GET_DATA_REQUESTED:
return { ...state, isLoading: true };
case GET_DATA_DONE:
return { ...state, isLoading: false, [action.payload.stateName]: action.payload.data };
case GET_DATA_FAILED:
return { ...state, isLoading: false, isError: true}
default:
return state;
}
};
这样你就可以发送类似 getData('/user', 'user') 或 getData('/products', 'products') 的 Action ,并拥有这样的状态:
{
user: {
// your users data
},
products: {
// your products data
}
}
关于javascript - Redux 获取操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49113121/