Question

我已经创建了一个基本的reducer，状态得到了更新，但是render方法没有被调用，这里是reducer文件。

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中没有任何变化，并且render方法仍然没有被调用。

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

Answer 1

删除了以前的答案，因为它已经不相关了

您的store.js文件似乎正确组合了reducer，您的mapStateToProps和mapDispatchToProps函数看起来很好，而accountSelector reducer文件看起来很好，因此在这一点上剩下的唯一一件事实际上是在组件中使用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

状态更新后未调用渲染

1 个答案: