Реагируйте на редукторы - PullRequest
Новая
       36

Реагируйте на редукторы

0 голосов
/ 07 марта 2020

Я использую Redux с React, и я ожидаю, что мои реквизиты будут обновляться при каждом изменении магазина, но они этого не делают.

Я исключил все операции импорта и оставил только код, связанный с задача 

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);

редуктор. 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 функция вызывается, но реквизит никогда не меняется, что я Я делаю не так?

1 Ответ

1 голос
/ 07 марта 2020

Вы не обновляете массив ссылок rows. Вам необходимо присвоить новую ссылку 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
}
...