如何为单个multireducer子切片提供初始状态

Question

我的项目使用multireducer来维护同一个reducer的许多实例。 我的商店是使用以下内容创建的：

(function(H) {
  H.wrap(H.Tooltip.prototype, 'getLabel', function(proceed) {

    var chart = this.chart,
      options = this.options,
      chartRenderer = chart.renderer,
      box;

    if (!this.label) {

      this.renderer = new H.Renderer(document.body, 0, 0);
      box = this.renderer.boxWrapper;
      box.css({
        position: 'absolute',
        top: '-9999px'
      });
      chart.renderer = this.renderer;
      proceed.call(this, chart, options);
      chart.renderer = chartRenderer;

      this.label.attr({
        x: 0,
        y: 0
      });
      this.label.xSetter = function(value) {
        box.element.style.left = value + 'px';
      };
      this.label.ySetter = function(value) {
        box.element.style.top = value + 'px';
      };
    }
    return this.label;
  });

  H.wrap(H.Tooltip.prototype, 'getPosition', function(proceed, boxWidth, boxHeight, point) {
    var chart = this.chart,
      chartWidth = chart.chartWidth,
      chartHeight = chart.chartHeight,
      chartPlotWidth = chart.plotWidth,
      chartPlotHeight = chart.plotHeight,
      pos;
    point.plotX += this.chart.pointer.chartPosition.left;
    point.plotY += this.chart.pointer.chartPosition.top;

    // Temporary set the chart size to the full document, so that the tooltip positioner picks it up
    chart.chartWidth = $(window).width();
    chart.plotWidth += chart.chartWidth - chartWidth;
    chart.chartHeight = $(document).height();
    chart.plotHeight += chart.chartHeight - chartHeight;

    var pos = proceed.call(this, boxWidth, boxHeight, point);

    chart.chartWidth = chartWidth;
    chart.plotWidth = chartPlotWidth;
    chart.chartHeight = chartHeight;
    chart.plotHeight = chartPlotHeight;

    return pos;
  });

  /**
   * Find the new position and perform the move. This override is identical
   * to the core function, except the anchorX and anchorY arguments to move().
   */
  H.Tooltip.prototype.updatePosition = function(point) {
    var chart = this.chart,
      label = this.label,
      pos = (this.options.positioner || this.getPosition).call(
        this,
        label.width,
        label.height,
        point
      );

    // Set the renderer size dynamically to prevent document size to change
    this.renderer.setSize(
      label.width + (this.options.borderWidth || 0),
      label.height + this.distance,
      false
    );

    // do the move
    this.move(
      Math.round(pos.x),
      Math.round(pos.y || 0), // can be undefined (#3977)
      point.plotX + chart.plotLeft - pos.x,
      point.plotY + chart.plotTop - pos.y
    );
  };

}(Highcharts));


$('.container').each(function(i, v) {
  $(v).highcharts({

    chart: {
      type: 'column',
      inverted: true,
      borderWidth: 1
    },

    title: {
      text: 'Tooltip outside the box'
    },

    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr']
    },

    legend: {
      enabled: false
    },

    series: [{
      name: 'Really, really long series name 1',
      data: [1, 4, 2, 3]
    }, {
      name: 'Really, really long series name 2',
      data: [4, 2, 5, 3]
    }, {
      name: 'Really, really long series name 2',
      data: [6, 5, 3, 1]
    }, {
      name: 'Really, really long series name 2',
      data: [6, 4, 2, 1]
    }]

  })
});

现在，我需要为const initialState = {}; export default createStoreWithMiddleware(combineReducers({ foo: fooReducer, sorting: multireducer({ sorterA: tableSorterReducer, sorterB: tableSorterReducer, }), }), initialState); 添加初始状态。 如果我添加以下内容......

sorterB

...然后在商店中根本没有创建const initialState = { sorting: { sorterB: { key: 'foo', order: 'asc' } } }; ，因为它不包含在sorterA的初始值中。

那么我怎样才能为多减速器的一部分指定初始状态呢？

Answer 1

查看文档帮助我找到了解决方案。

  

所有reducers在初始化时都是未定义的，因此应该编写它们，以便在给定undefined时，应该返回一些值。

- Redux documentation

所以我需要做的就是确保我的reducer函数在收到undefined时返回预期的初始状态！

这是我想出的：

export default createStoreWithMiddleware(combineReducers({   
    foo: fooReducer,
    sorting: multireducer({
        sorterA: tableSorterReducer,
        sorterB: (state = { key: 'foo', order: 'asc' }, action) => 
            tableSorterReducer(state, action),
    }),
}));

当然，tableSorterReducer定义了它自己的initialState，但我在这里压倒了它。

Answer 2

以下是我经常使用它的方式。

配置商店：

IC10000, IC100000, IC10000, IC10000.

还原减速器示例：

export default function configureStore(preloadedState){
    let defaultStates = {
        user: {
            isLoggedIn: preloadedState.isLoggedIn,
        }
        // preloadedState contains values from server, in order to hydrate store
    };

    return createStore(
        rootReducer,
        defaultStates,
        applyMiddleware(
            thunkMiddleware,
            loggerMiddleware
        )
    )
}