Question

我为我的react应用创建了模拟数据，只是为了测试和检查我的redux是否正常工作。但是它给出了“无法读取未定义的属性'usersData'”的错误。我有点困惑，我做错了什么，因为我对redux不满意。

减速器：

    import types from './types';

    let defaultState = {
  usersDetail:{
    usersData: [],
    isFetching: false,
    error: ''
  }
};
export default function usersReducer(state= defaultState, action= {}){
  let newState= {};
  switch (action.type){
    case types.INITIATE_USER_REQUEST:
      newState = {
        usersData: action.usersData,
        isFetching: action.isFetching,
        error: ''
      };
      return {
        ...state,
        usersDetail: {
          ...state.usersDetail, newState
        }
      };
    case types.RECEIVE_USER:
      newState = {
        usersData: action.usersData,
        isFetching: action.isFetching,
        error: ''
      };
      return {
        ...state,
        usersDetail:{
          ...state.usersDetail, newState
        }
      };
    case types.USER_ERROR:
      newState = {
        usersData:{},
        isFetching: false,
        error: action.error
      };
      return{
        ...state,
        usersDetail:{
          ...state.usersDetail, newState
        }
      };
    default:
      return state;
  }
}

动作：

import types from './types';
//import {api} from "api";
import { usersDetails } from "./user-utilis";


const initiateUserRequest = (isFetching) => {
  return{
    type: types.INITIATE_USER_REQUEST,
    isFetching
  }
};
// const receiveUsers = (user, isFetching) => {
//   return {
//     type: types.RECEIVE_USER,
//     user,
//     isFetching
//   }
// };
// const errorUsers = (error) => {
//   return{
//     type: types.USER_ERROR,
//     error
//   }
// };
export const getUsers = (param1, param2) =>{
  //let url = 'www.api.com';

  return dispatch => {
    dispatch(initiateUserRequest(true));
    dispatch(usersDetails, false);

    //   api({
    //     url: url,
    //     method: 'GET'
    //   })
    //     .then(response=>{
    //       dispatch(receiveUsers(response.data, param1, param2), false)
    //     })
    //     .catch(err=>{
    //       dispatch(errorUsers("Something went wrong:"+ err.message))
    //     })
    // }
  }
};

由于我正在使用模拟数据来检查它是否尚未集成api，所以我对该部分进行了评论。

商店已连接并作为道具传递到我的组件中，就像这样。

import React from 'react';
import {connect} from 'react-redux';

//import components
import Users from '../../views/Users/Users.jsx'

//import actions
import {getUsers} from "./actions";

const UsersContainer = (props) => (
  <Users {...props}/>
);

const mapStateToProps = state =>({
    usersDetail: state.usersReducer.usersDetail
});

const mapDispatchToProps = dispatch =>({
  getUsers: (param1, param2) => dispatch(getUsers(param1, param2))
});

export default connect(mapStateToProps, mapDispatchToProps)(UsersContainer);

我正在像这样在道具中传递这些数据作为道具。

<Table
                tableHeaderColor="primary"
                onEditUser={this.onEditUser}
                tableHead={["UserName", "Name", "Email", "Phone", "Zip", "Address", "status", "Mobile"]}
                tableData={usersDetail.usersData}
              />

Answer 1

它在渲染吗？我认为问题在于，您在reducer中将usersData的初始值声明为数组，但是在组件中将其引用为对象。因此，通过将其最初更改为对象而不是化简器内部的数组，应该可以解决您的问题。

如何在Reactor中使用Reducer发送模拟数据？

1 个答案: