如何解决Redux商店属性会在更新时嵌套在自身中
我遇到这样的问题,我的props
最终看起来像这样(在console.log上):
{
fetchRoles: f(),roles:
roles: ["Admin","Manager"],}
如您所见,我在代码中的某个地方犯了一个错误,该错误导致roles
道具嵌套在自身中,这将迫使我执行const { roles } = this.props.roles;
以便检索我的数据(顺便说一句)。
我一直在寻求帮助,但是似乎没有多少人遇到过这个问题(我刚刚开始使用redux)。
在下面您可以看到我的文件:
rolesReducer.js
:
import { FETCH_ROLES } from "../actions/types";
const initialState = {
roles: [],};
export default function (state = initialState,action) {
const { roles } = action;
switch (action.type) {
case FETCH_ROLES:
return {
...state,//also tried ...state.roles and same issue.
roles,};
default:
return state;
}
}
rolesActions.js
:
import { FETCH_ROLES } from "./types";
const roles = ["SuperAdmin"];
export function fetchRoles() {
return function (dispatch) {
dispatch({
type: FETCH_ROLES,roles,});
};
}
reducers/index.js
(根减速器):
import { combineReducers } from "redux";
import rolesReducer from "./rolesReducer";
import roleMembersReducer from "./roleMembersReducer";
export default combineReducers({
roles: rolesReducer,roleMembers: roleMembersReducer,});
PermissionsManager.jsx
:
import React,{ Component } from "react";
import { connect } from "react-redux";
import { Container } from "react-bootstrap";
import { fetchRoles } from "../redux/actions/rolesActions";
import RoleContainer from "./RoleContainer";
class PermissionsManager extends Component {
componentDidMount() {
this.props.fetchRoles();
}
render() {
console.log(this.props);
const { roles } = this.props.roles;
return (
<Container>
{roles.map((role) => {
return <RoleContainer key={role} role={role} />;
})}
</Container>
);
}
}
const mapStateToProps = (state) => {
return {
roles: state.roles,};
};
export default connect(mapStateToProps,{ fetchRoles })(PermissionsManager);
编辑1-添加减速器日志:
按照建议,我记录了化径器,特别是state
和action
:
state
:
{
roles: [],}
action
:
{
roles: ["Admin",type: "FETCH_ROLES",}
我相信没有重复或异常结构。
解决方法
一种根据您的要求来塑造商店的方法是将rolesReducer.js
中的角色展平,
您可以这样做,将接收到的数组直接存储在部分状态中:
initialState
应该看起来像
const initialState = []
以及switch语句中
case FETCH_ROLES:
return roles
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。