状态更新后不调用渲染

Question

我已经创建了一个基本的减速器，状态确实得到了更新，但是渲染方法没有被调用这里是减速器文件。

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;

状态确实会更新，因为我已经记录了它。 如您所见，reducer 中没有突变，渲染方法仍然没有被调用。

这里是 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
    });
  }

更新了我结合reducer的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 将获得项目的默认值，即在reducer 中已经定义的空数组，因为即使在reducer 中更新了状态，也不会调用render 方法。

Answer 1

删除旧答案，因为它现在无关紧要

看起来您的 store.js 文件正确组合了减速器，您的 mapStateToProps 和 mapDispatchToProps 函数看起来不错，并且您的 accountSelector 减速器文件看起来不错，所以此时唯一剩下的就是实际使用您的redux 在你的组件中存储数据（来自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