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

Я создал фиктивные данные для своего приложения для реагирования, просто чтобы проверить и проверить свое сокращение, правильно ли оно работает или нет. Но выдает ошибку «Невозможно прочитать свойство usersData из 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}
              />
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
611
1

Ответы 1

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

Другие вопросы по теме