Почему реакт коммпонент не перерисовыается после запроса в componentDidMount?

Question

[Николай Семенов]

Ребятушки, все доброго дня!

Подскажите как решить сей вопрос
Есть такой компонент

import React, { Component } from 'react';
import PropTypes from 'prop-types'
import connectWrapper from '../redux/utils/connect'
import { rootActions as actions } from '../redux/rootReducer'
import ReactTable from 'react-table'
import checkboxHOC from 'react-table/lib/hoc/selectTable'

const CheckboxTable = checkboxHOC(ReactTable);

class AdminView extends Component {
  static propTypes = {
    state: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired
  };

  constructor (props) {
    super(props);
    const { admins } = props.state.toJS().admins
    this.state = {
      adminList: admins
    }
  }

  componentDidMount () {
    const { actions } = this.props;
    actions.fetchAdmins()
  }

  componentWillReceiveProps (nextprops) {

  }
  render () {
    // const state = this.props.state.toJS();
    // const { admins } = state.admins
    const { adminList } = this.state
    console.log(adminList)
    return (
      <div>
        {adminList.errorMessage}
        {/* <ReactTable
          data={adminList}
          columns={[
            {
              Header: 'id',
              accessor: 'id'
            },
            {
              Header: 'Email',
              accessor: 'email'
            },
            {
              Header: 'Username',
              accessor: 'username'
            },
            {
              Header: 'Roles Titles',
              accessor: 'id'
            },
            {
              Header: 'Member for',
              accessor: 'id'
            },
            {
              Header: 'Last access',
              accessor: 'id'
            },
            {
              Header: 'Status',
              accessor: 'id'
            },
            {
              Header: 'Roles Titles',
              accessor: 'id'
            }
          ]}
          defaultPageSize={10}
          // className='-striped -highlight'
        /> */}
      </div>
    );
  }
}

export default connectWrapper(actions, AdminView);

в таблице данные не рендерятся, так как в стейте стоят первоначальные initialState(т.е. пустые)
в didmount делаю запрос за данными, они приходят, вижу их в devtools, но компонент не перерисовыается. Why?

Comments

[Антон Спирин]

Код редьюсера нужен. Думаю проблема там. Стейт скорей всего мутируете.

[Николай Семенов]

Антон Спирин, код редюсера

import { handleActions, createAction } from 'redux-actions'
import { fromJS } from 'immutable'
import adminApi from '../../../api/adminApi'

export const FETCH_ADMINS = 'FETCH_ADMINS'

export const _getAdminsPending = createAction(`${FETCH_ADMINS}_PENDING`);

export const _getAdminsFulfilled = createAction(`${FETCH_ADMINS}_FULFILLED`, response => response);

export const _getAdminsRejected = createAction(`${FETCH_ADMINS}_REJECTED`, error => error);

export const fetchAdmins = () => (dispatch, getState, token) => {
  dispatch(_getAdminsPending());

  adminApi.getAdmins(token)
    .then((response) => {
      console.log(response)
      dispatch(_getAdminsFulfilled(response));
    })
    .catch((error) => {
      dispatch(_getAdminsRejected(error));
    });
};

export const actions = {
  fetchAdmins
};

export const initialState = fromJS({
  admins: {
    adminList: [],
    isPending: false,
    errorMessage: 'fdfdf'
  }
})

export default handleActions({ 
  [`${FETCH_ADMINS}_PENDING`]: (state) => {
    return state
      .setIn(['admins', 'isPending'], true)
  },

  [`${FETCH_ADMINS}_REJECTED`]: (state, { payload: error }) => {
    const message = error.response && error.response.data.message;

    return state.mergeIn(['admins'], {
      isPending: false,
      errorMessage: message
    })
  },

  [`${FETCH_ADMINS}_FULFILLED`]: (state, { payload }) => {
    return state.mergeIn(['admins'], {
      adminList: payload,
      isPending: false,
      errorMessage: ''
    })
  }
}, initialState)

[Антон Спирин]

Николай Семенов, зачем вы adminList в state пишите? В этом и проблема, данные ведь в props приходят. Не надо их туда писать. Используйте напрямую из props.

Answer 1

[Роман Александрович]

componentDidMount () {
const { actions } = this.props;
actions.fetchAdmins()
}

actions.fetchAdmins() вы понимаете что данная функция вызовется только 1 раз?

Comments

[Николай Семенов]

да

[Роман Александрович]

Николай Семенов,

componentWillReceiveProps (nextprops) {
console.log("nextprops",nextprops)
  }

покажите что вам выдаст консоль

[Николай Семенов]

Роман Александрович, выдает то, что должно быть в стейте...полный массив с данными

[Роман Александрович]

componentWillReceiveProps (nextprops) {
this.setState({
adminList:nextProps.admins
})
  }

[Николай Семенов]

Роман Александрович, если я в render вытаскиваю этот массив из пропсов, то он там есть. получается didmount не обновляет стейт класса

[Роман Александрович]

Николай Семенов, componentWillReceiveProps (nextprops) {
if (nextprops.admins!==undefind){
this.setState({
adminList:nextProps.admins
})
}

}

[Николай Семенов]

Роман Александрович, спасибо большое

[Алексей Уколов]

Зачем вообще локальный state, если используется redux? Надо либо крестик снять, либо трусы надеть.

[Антон Спирин]

Николай Семенов, чем мотивированно использование state компонента, для данных из стора? Не надо так делать.

[Николай Семенов]

Антон Спирин, хмм. вот это вопрос. Думал так на всякий случай. ну они там будут чекаться в группы и группе будет применяться действие (удаление, блокирование). не знал, что использование state и редакс отдает душком. Как быть, то теперь?

[Антон Спирин]

Николай Семенов, удаление и блокирование лучше сделать через actions вы ведь так и так будете запросы на сервер делать. Для таких задач в сторе данные в нормализованом виде хранят, чтобы можно было легко обновить одну сущность. А если надо забрать массивом используют селекторы.
Использовать локальный state можно и нужно, но не для данных из стор, а для локальных состояний и всего того, что не вынесено в redux.

[Николай Семенов]

Антон Спирин, понял. спасибо