首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用react中的reducers发送模拟数据?

如何使用react中的reducers发送模拟数据?
EN

Stack Overflow用户
提问于 2018-12-19 04:51:41
回答 1查看 600关注 0票数 1

我为我的react应用程序创建了模拟数据,只是为了测试和检查我的redux是否正常工作。但是它会给出一个错误"Cannot read property 'usersData‘of undefined“。我有点困惑我做错了什么,因为我不擅长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}
              />
EN

回答 1

Stack Overflow用户

发布于 2018-12-19 05:03:42

它到底有没有渲染?我认为问题在于,您在缩减程序中将usersData的初始值声明为数组,但在组件中将其作为对象引用。所以在你的reducer中,通过将它最初改为一个对象,而不是一个数组,我认为应该可以解决你的问题。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53840871

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档