Question

我对使用redux，redux-immutable和immutablejs的反应应用程序中的状态发生了什么感到困惑。

我的减速器看起来像这样：

export const initialState = Map({
  isFetching: false,
  forecast: List()
});

export function forecast(state = initialState, action) {
  switch(action.type) {
  case ActionTypes.FORECAST.REQUEST:
    return state.merge({
      isFetching: true
    });
  case ActionTypes.FORECAST.SUCCESS:
    return state.merge({
      isFetching: false,
      forecast: action.response
    });
  case ActionTypes.FORECAST.FAILURE:
    return state.merge({
      // isFetching: false
    });
  }

  return state;
};

export function errorMessage(state = null, action) {
  const { type, error } = action;

  if (type === ActionTypes.RESET_ERROR_MESSAGE) {
    return null;
  } else if (error) {
    return {errorMessage: action.error};
  }

  return state;
};

export default combineReducers({
  forecast,
  errorMessage,
  routing: routerReducer
});

以下是我创建商店的方式：

  import reducers from '../reducers';
  const initialState = Map();

  const store = createStore(reducers,
                            initialState,
                            compose(
                              applyMiddleware(
                                thunkMiddleware,
                                logger
                              )
                            ));

在连接组件中，我将此函数传递给connect：

function mapStateToProps(state) {
  return {
    forecast: state.get('forecast'),
    isFetching: state.get('isFetching')
  };
}

export default connect(mapStateToProps, {
  fetchForecast
})(Forecast);

但是，如果我看一下进入mapStateToProps

的状态

它似乎是由3个减速器组成的地图，我结合以下代码;

export default combineReducers({
  forecast,
  errorMessage,
  routing: routerReducer
});

我可以将mapStateToProps中的代码更改为：

function mapStateToProps(state = state.get('forecast')) {
  return {
    forecast: state.get('forecast').get('forecast'),
    isFetching: state.get('forecast').get('isFetching')
  };
}

但这感觉不对。为什么我的状态由3个减速器组成，而不是我在此指定的初始状态：

export const initialState = Map({
  isFetching: false,
  forecast: List()
});

export function forecast(state = initialState, action) {
  switch(action.type) {
  case ActionTypes.FORECAST.REQUEST:

Answer 1

Redux＆＃34; combineReducers＆＃34;方法采用多个切片状态并将它们组合成一个状态。它在这里工作正常。

您的initialState正在每个单独的reducer中使用，并且正在设置整个状态的 slice 的初始状态。它不是整个组合减速器的初始状态。

您拥有的代码将创建一个初始状态：

{
    forecast: {
        isFetching: false,
        forecast: List()
    },
    errorMessage: null,
    routing: //not shown in code provided
}

相反，如果您希望预测以＆＃34; List（）＆＃34;的初始状态开始？您应该更改传递给预测减速器的初始状态，而不是对象;

export function forecast(state = List(), action) {

然后为＆＃34; isFetching＆＃34;创建一个单独的reducer。如果你想让它成为预测的同伴。

redux-immutable和initialstate

1 个答案: