状态更新后，React Component不会重新呈现

Question

The React component is not rendering when the redux store is getting updated.

If I am using set timeout I can able to see the data in the console. Why the component is not rendering.

What is the issue of here why my component is not getting updated. I have attached the code below.

Component

 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux';
 import requestAPI from '../actions/getuseraction'
 class Viewdetails extends Component {
componentDidMount() {
    this.props.onGetuserlist('all')
}
render() {
    console.log("this.props.userlist")

    setTimeout(() => {
        console.log(this.props.userlist)
         this.props.userlist.map((item,i)=>{
            console.log(i)
        })
    }, 1000);
    const data = this.props.userlist.map((item,i)=>{
        return <tr>
        <td>{item.name}</td>
        <td>{item.name}</td>
        <td>{item.name}</td>
        <td>{item.name}</td>
        <td>{item.name}</td>
        <td>{item.name}</td>
    </tr>
    })
    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Joindate</th>
                        <th>Country</th>
                        <th>Gender</th>
                        <th>Skills</th>
                    </tr></thead>
                <tbody>
                    {data}
                </tbody>
            </table>
        </div>
    )
 }
}
function mapStateToProps(state) {
return {
    userlist: state.userlist,
 };
}
function mapActionstoProps(dispatch) {
return {
    onGetuserlist: bindActionCreators(requestAPI, dispatch),
};
}
export default connect(mapStateToProps, mapActionstoProps)(Viewdetails)

Actions

function requestAPI(type) {
console.log("requestAPI")
switch (type) {
    case 'country':
    let countryist = [];
    getcountryist()
        .then(data => countryist.push(...data.resultSet))
        .catch(reason => console.log(reason.message))
    return {
        type: 'countrylist',
        payload: countryist
    };
    case 'all':
        let userlist = [];
        getlistofuser()
            .then(data => userlist.push(...data.resultSet))
            .catch(reason => console.log(reason.message))
        return {
            type: 'userlist',
            payload: userlist
        };

    }

 }

export default requestAPI;

 async function getlistofuser() {
   let response = await fetch('https://api.myjson.com/bins/13g2pv');
   let data = await response.json();
   return data;
 }
 async function getcountryist() {
  let response = await fetch('https://api.myjson.com/bins/1g9fqv');
  let data = await response.json();
  return data;
}

Reducer

function getalluserlist(state = [], action) {
console.log("Reducer")
console.log(action.payload)
switch (action.type) {
    case 'userlist':
        return action.payload
    default:
        return state
 }
}

 export default getalluserlist;

Answer 1

You need to return a new object instance within the reducer.

React requires a new reference of an object to find out what state has been changed.

When you pass action.payload you are returning the same instance after data has been fetched.

function getalluserlist(state = [], action) {
  switch (action.type) {
    case "userlist":
      return action.payload;
    default:
      return state;
  }
}

So return a new reference (I am guessing the state is shaped as [] ).

function getalluserlist(state = [], action) {
  switch (action.type) {
    case "userlist":
      return [...state, action.payload];
    default:
      return state;
  }
}