redux分派响应和返回消息

Question

在我的行动，我调度的类型和有效载荷，但如果我也想res.status和返回JSON消息被包含到我的道具。在我的action和reducer中我该怎么做呢?

行动

export const fetchUserPosts = () => (dispatch) => {
fetch(`${currentPort}/user/recipes`,
{
withCredentials: true,
credentials: 'include',
})
.then((res) => {
if (res.status !== 401) return res.json().then((data) => data);
return { message: { msgBody: 'UnAuthorized' }, msgError: true };
})
.then((posts) => dispatch({
type: FETCH_USER_POSTS,
payload: posts,
}));
};

齿轮

export default function (state = initialState, action) {
switch (action.type) {
case FETCH_USER_POSTS:
return {
...state,
fetchUsersPosts: action.payload,
};

default:
return state;
}
}

Answer 1

您可以将多个项组合为单个有效负载。我会为成功和错误创造不同的行动。使用相同的操作会使reducer的逻辑复杂化。使用async/await比使用嵌套承诺更容易。

这是一个使用SpaceX开放API的工作示例:

const FETCH_USER_POSTS_SUCCESS = 'FETCH_USER_POSTS_SUCCESS'
const FETCH_USER_POSTS_FAILED = 'FETCH_USER_POSTS_FAILURE'
const fetchPostSuccessAction = (payload) => ({
type: 'FETCH_USER_POSTS_SUCCESS',
payload,
})
const fetchPostFailureAction = (payload) => ({
type: 'FETCH_USER_POSTS_FAILURE',
payload,
})
const fetchUserPosts = () => async dispatch => {
const res = await fetch('https://api.spacexdata.com/v3/launches/latest');

if (res.status !== 401) {
const { ships: posts } = await res.json();

dispatch(fetchPostSuccessAction({
posts,
status: res.status,
}))
} else {
dispatch(fetchPostFailureAction({ 
message: { msgBody: 'UnAuthorized' },
}))
}
};
fetchUserPosts()(console.log)

reducer可以通过解构对象来处理对象，并以任何需要的方式将属性转换为新状态。您还可以更改其他属性，例如根据动作类型将errMsg更改为true或false:

export default function (state = initialState, { type, payload }) {
switch (type) {
case FETCH_USER_POSTS_SUCCESS: {
const { posts, status } = payload;

return {
...state,
status,
fetchUsersPosts: posts,
msgError: false,
message: null
};
}

case FETCH_USER_POSTS_FAILURE: {
const { message } = payload;

return {
...state,
status: 401,
fetchUsersPosts: null,
msgError: true,
message
};
}

default:
return state;
}
}

Answer 2

如果我没看错的话，你是在组件内部使用这个动作来发送取回。你不能通过reducer访问组件的props。您可以在组件中发送http请求，并使用该请求在状态中存储响应。或者使用connect from 'react-redux' package来映射redux存储以访问获取结果。

import { connect } from 'react-redux'

const component = props => {
//to access redux state in component use props.myprop

return <div>{props.myprops.title}</div>
}
const mapStateToProps = state => {
return{
myprop: state.fetchUsersPosts
}
}
export default connect(mapStateToProps)(component)

如果这是你正在寻找的，你可以在https://react-redux.js.org/api/connect了解更多