React redux 道具不更新

Question

I'm using Redux with React, and I expect my props to update whenever the store changes, but they don't.

I omitted all imports and left only the code related to the problem

function TableBody({ rows, rowsPerPage, page }) {

    useEffect(() => {
        console.log('chagned'); //only get's triggered on initial render
        console.log(rows);
    }, [rows])

    return (
        <TableBodyMaterial>
            {console.log(rows, rows[0])}
            {console.log(rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage))}
            {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => {
                console.log(row);
                return (
                    <TableRow row={row} key={row.email} />
                );
            })}
        </TableBodyMaterial>
    )
}

const mapStateToProps = (state, ownProps) => {
    console.log(state.rows);  // logs rows on every store change
    return {
        rows: state.rows
    }
}

export default connect(
    mapStateToProps
)(TableBody);

reducer.js

const initialState = {
    rows: getData()
}

function rootReducer(state = initialState, action) {
    switch (action.type) {
        case SORT: {
            const { by, direction } = action.payload;
            const newRows = state.rows.sort((a, b) => {
                if (typeof a[by] === 'string') {
                    return a[by].localeCompare(b[by]);
                }
                return a[by] - b[by];
            });
            console.log(newRows);
            return { rows: newRows }
        }
        default: return state
    }
}

export default rootReducer;

mapStateToProps function is being called, but props never seem to change, what am I doing wrong?

Answer 1

You are not updating the reference rows array. You need to assign a new reference to rows

case SORT: {
   const { by, direction } = action.payload;
   const newRows = state.rows.sort((a, b) => {
      if (typeof a[by] === 'string') {
        return a[by].localeCompare(b[by]);
      }
      return a[by] - b[by];
   });
   return { rows: [...newRows] }; //need to do like this
}