Как отправить ложные данные с помощью редукторов в реакции? - PullRequest
Новая
       7

Как отправить ложные данные с помощью редукторов в реакции?

0 голосов
/ 18 декабря 2018

Я создал фиктивные данные для своего приложения реакции, просто чтобы проверить и проверить мой редукс, работает ли он правильно или нет.Но это выдает ошибку «Не удается прочитать свойство 'usersData' из неопределенного».Я немного сбит с толку, что я делаю не так, потому что я не очень хорошо разбираюсь.

Редукторы: 

    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}
              />

1 Ответ

0 голосов
/ 19 декабря 2018

Это рендеринг вообще?Я думаю, что проблема в том, что вы объявляете начальное значение для usersData как массив в вашем редукторе, но вы ссылаетесь на него как на объект в ваших компонентах.Таким образом, я думаю, что если изначально изменить его на объект, а не на массив внутри вашего редуктора, это решит вашу проблему.

...