Render не вызывается после обновления состояния - PullRequest
Новая
       6

Render не вызывается после обновления состояния

0 голосов
/ 27 июня 2018

Я создал основной редуктор, состояние которого обновляется, но здесь не вызывается метод рендеринга, это файл редуктора.

reducer.js 

 const accountSelector = (
      store = {
        items: [],
        selectAll: false,
        searchList: [],
        filterList: [],
        labelCount: 0
      },
      action
    ) => {
      let newStore = {};
      switch (action.type) {
        case 'INITIALIZE_LIST':
          console.log('in INITIALIZE_LIST');
          newStore = { ...store, items: action.payload };
          break;

        case 'SEARCH_LIST':
          newStore = { ...store, searchList: action.payload };
          break;

        case 'FILTER_LIST':
          newStore = { ...store, filterList: action.payload };
          break;

        case 'SELECT_ALL_ACCOUNTS':
          newStore = { ...store, selectAll: !store.list.selectAll };
          break;

        case 'UPDATE_LABEL_COUNT':
          newStore = { ...store, labelCount: action.payload };
          break;

        default:
          newStore = { ...store };
          break;
      }
      console.log('  newStore:  ', newStore);

      return newStore;
    };

    export default accountSelector;

Состояние обновляется, поскольку я уже зарегистрировал его. Как видите, в редукторе нет мутаций, и все равно метод рендеринга не вызывается.

Вот mapStateToProps и mapDispatchToProps 

const mapStateToProps = state => ({
  accountSelector: state.accountSelector
});

const mapDispatchToProps = dispatch => ({
  initializeAccountsList: list => {
    console.log('~~~~ ac selector ~~~~~~ in initializeAccountsList method');
    dispatch({
      type: 'INITIALIZE_LIST',
      payload: list
    });
  }

Обновлен Вопрос с файлом store.js, где я объединяю редуктор: 

import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';
import group from './reducer/groupReducer';
import clients from './reducer/clientReducer';
import accounts from './reducer/accountReducer';
import accountSelector from './reducer/accountSelectorReducer';
import createfeed from './reducer/createfeed';

const middleware = applyMiddleware(thunk, promise());
const reducers = combineReducers({
  createfeed,
  group,
  clients,
  accounts,
  accountSelector
});

export default createStore(reducers, {}, middleware);

ОБНОВЛЕНИЕ: код метода рендеринга, в котором есть компонент, использующий одно из свойств состояния accountSelector 

 render() {
 let list = this.props.accountSelector.items;
    if (this.props.accountSelector.searchList.length > 0) {
      list = this.props.accountSelector.searchList;
    }
 return (
      <div className="accountv2-select">
       <UserList
          updateLabelCount={this.updateLabelCount}
          list={list}
          selectedAccounts={this.props.selectedAccounts}
          selectAll={this.props.selectAll}
          selectedLoginIds={this.props.selectedLoginIds}
        />
    );
}

Конечно, list получит значение по умолчанию элементов, т. Е. Пустой массив, уже определенный в редукторе, поскольку метод рендеринга не вызывается, даже если состояние обновляется в редукторе.

1 Ответ

0 голосов
/ 27 июня 2018

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

Похоже, что ваш store.js файл правильно сочетает в себе редукторы, ваши mapStateToProps и mapDispatchToProps функции выглядят нормально, а ваш accountSelector файл редуктора выглядит нормально, так что на данный момент единственное, что осталось, это на самом деле использовать ваш хранить данные в редуксе (от mapStateToProps) в вашем компоненте.

Вы должны получать доступ к дате состояния (например, items, searchList, filterList и т. Д.) Следующим образом: 

// you mapped your entire accountSelector state to this.props.accountSelector
this.props.accountSelector.items
this.props.accountSelector.searchList
this.props.accountSelector.filterList
// ... etc
...