分离一个太大的减速器 - 得到错误答案

【问题标题】：Seperate a reducer that is too large - getting error分离一个太大的减速器 - 得到错误
【发布时间】：2017-05-09 06:22:47
【问题描述】：

我想在 location 减速器中添加一个 distanceFromPlaceValue 减速器 - 因为我有这种形状的 redux 存储：

import { Map } from 'immutable'
import { Dimensions } from 'react-native'

const searchForm = Map(
  {
    'categories': [],
    // 'mealTypes': [],
    'location': {
      'locationInput': '',
      'place': {},
      'position': {},
      'distanceFromPlaceValue': 10,
      'distanceFromPlaceUnit': 'kilometer',
      'autocompleteResults': {}
    },
    'keywords': ''
  }
)

var { width, height } = Dimensions.get('window')
const ASPECT_RATIO = width / height
const LATITUDE = 19.0760
const LONGITUDE = 72.8777

const LATITUDE_DELTA = 0.01
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO

const region = Map(
  {
    region: {
      latitude: LATITUDE,
      longitude: LONGITUDE,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA
    }
  }
)

const map = Map(
  region: region
)

const searchPage = Map(
  {
    'isMenuOpen': true
  }
)

const initialState = Map(
  {
    searchForm: searchForm,
    searchPage: searchPage,
    map: map
  }
)

export default initialState

而且我没有将 distanceFromPlaceValue 案例添加到 location 减速器中，并且我真的不想这样做 - 减速器变得太大了。

这是我的尝试：

const rootReducer = combineReducers(
  {
    searchForm: combineReducers(
      {
        keywords,
        categories,
        location: combineReducers({ location, distanceFromPlaceValue })
      }),
    searchPage,
    map
  }
)

收到此错误：

reducer 收到的先前状态是意外类型。预期参数是 Immutable.Collection 的实例或 Immutable.Record 具有以下属性：“位置”， "distanceFromPlaceValue"。

我在 combineReducers 中做错了什么。我做错了什么？

【问题讨论】：

标签： javascript react-native redux react-redux

【解决方案1】：

combineReducers 将嵌套location 和distanceFromPlaceValue 比我认为你想要的更深的层次，所以你最终会得到这样的结构：

{
    'keywords': ''
    'categories': [],
    'location': {
      'location': {
        'locationInput': '',
        'place': {},
        'position': {},
        'autocompleteResults': {}
      }
      'distanceFromPlaceValue': {
        'distanceFromPlaceValue': 10,
        'distanceFromPlaceUnit': 'kilometer'
      }
    }
  }

而不是像searchForm const 那样合并在一起。

阅读有关 beyond combineReducers 的 Redux 文档，然后考虑您希望您的状态结构最终是什么样子。

如果你还想合并两个reducer，而不是把它们组合成一个嵌套的结构，有plenty of other libraries可以用不同的方式组合reducer以获得不同的效果。

我之前使用过redux-concatenate-reducers 来执行此操作，但不是使用 ImmutableJS 结构，因此它可能无法为您开箱即用

const rootReducer = combineReducers(
  {
    searchForm: combineReducers(
      {
        keywords,
        categories,
        location: concatenateReducers([location, distanceFromPlaceValue])
      }),
    searchPage,
    map
  }
)

【讨论】：