State 在 react-redux useSelector()

Question

I'm trying to fetch and display data on the initial load of an application using react and redux. But the component that should display the data does not have the data by the time it is rendered. It eventually gets the data but doesn't re-render for some reason.

Here are my two components in question:

App.js

import React, {useEffect} from 'react';
import './App.css';
import RecordList from './components/RecordList';
import CreateRecord from './components/CreateRecord';
import {useDispatch} from 'react-redux';
import { initRecords } from './actions/recordActions';

function App() {
  const dispatch = useDispatch();

  // Gets initial record list.
  useEffect(() => {
    dispatch(initRecords());
  }, [dispatch])
  return (
    <div className="App">
      <CreateRecord />
      <RecordList/>
    </div>
  );
}

export default App;

RecordList.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'


export default function RecordList() {
  const dispatch = useDispatch();
  const records = useSelector(state=>state);
  console.log('state: ', records)
  return (
    <div>
      <h3>Albums</h3>
      {records.map(record =>
        <div key={record.id}>
          {record.albumName} by {record.artist}
        </div>
      )}
    </div>
  )
}

The issue I'm having is that initial data fetch in App.js isn't returning fast enough by the time the RecordList.js component is rendered. So in RecordList.js this bit throws an error saying map is not a function or cannot map on undefined:

{records.map(record =>
        <div key={record.id}>
          {record.albumName} by {record.artist}
        </div>
      )}

The component does eventually get the data if you comment out the JSX throwing the error. Initially it logs records as undefined but after a second it logs it with correct values.

Here are my reducer and actions: recordActions.js

import recordService from '../services/records';

export const initRecords = () => {
  return async dispatch => {
    const records = await recordService.getAll();
    console.log('from actions: ', records);
    dispatch({
      type: 'INIT_RECORDS',
      data: records
    })
  };
}

reducer

const recordReducer = (state = [], action) => {
  console.log('state now: ', state)
  console.log('action', action)
  switch(action.type) {
    case 'CREATE':
      return [...state, action.data];
    case 'INIT_RECORDS':
      return action.data;
    default: return state;
  }
}

export default recordReducer

Lastly, here is where I am making the axios call:

service

const getAll = async () => {
  const response = await axios.get('someapi.com/records');
  return response.data;
}

I've tried to conditionally render both the entire recordsList component and the records.map but the conditions only check once on the first load and never check again.

From my understanding, useSelector() should re-render the component when there's a state change, is it possible the state is just being mutated and not changed and how can I fix this?

Answer 1

Figured it out! Turns out in useSelector(state=>state) I needed to change it to useSelector(state=>state.records.Items ) to get to the array.