Question

我通常希望我的Reducer在商店的一个节点上行动。它们接收一个节点并返回该节点的新值。这就是这个工作的方式（它确实有效）：

shape.reducer.js：

// @flow
import initialState from '../../config/config'

export const shape = (initialShape: string = initialState.get('shape'),
  action: Object): string => {
  switch (action.type) {
    case 'UPDATE_SHAPE': {
      const newShape = action.payload.value
      return newShape
    }
    default:
      return initialShape
  }
}

但是，我现在正在开发一个不同的应用程序并编写我的第一个应用程序减速器。由于某种原因，它是在整个商店：

keywords.reducer.js：

// @flow
import initialState from '../../config/config'

const keywords = (initialKeywords: string = initialState.get('searchForm').get('keywords'),
  action: Object): string => {
  switch (action.type) {
    case 'UPDATE_KEYWORDS': {
      const newKeywords = action.payload.value
      return newKeywords
    }
    default:
      return initialKeywords
  }
}

export default keywords

因此，例如，如果关键字更新为＆＃34; word＆＃34;然后整个商店变得只是＆＃34;字＆＃34;。这两者之间的唯一区别是它们如何传递给createStore

top reducer：

const reducer = combineReducers({ height, width, thickness, shape })
const store = createStore(
  reducer,
  initialState,
  composeWithDevTools(applyMiddleware(thunk))
)

底部减速机：

const store = createStore(
  keywords,
  initialState,
  devToolsEnhancer()
)

所以我尝试改用它，因为它可能会阻止它在整个商店上行动：

const reducer = combineReducers({ keywords })
const store = createStore(
  reducer,
  initialState,
  devToolsEnhancer()
)

但是这导致了这个错误：

意外的财产＆＃34; searchForm＆＃34;发现在以前的州接收过减速机。预计会找到一个已知的reducer属性名称相反：＆＃34;关键字＆＃34;。意外的属性将被忽略。

顺便说一下，当应用程序启动时，这是我的整个商店：

import { Map } from 'immutable'

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

const initialState = Map(
  {
    searchForm: searchForm
  }
)

export default initialState

Answer 1

您已将初始商店设置为包含以下代码中名为searchForm的密钥的对象

const initialState = Map(
  {
    searchForm: searchForm
  }
)

在reducer中，您尝试仅为keywords设置减速器。理想情况下，您应该为您所在州的每个节点使用一个reducer 因此，您必须创建4缩减器并将其调用如下

const reducer = combineReducers({ keywords, categories , mealTypes, location })
const store = createStore(
  reducer,
  initialState,
  devToolsEnhancer()
)

最后你的initialState应该如下

const initialState = searchForm;

Redux reducer在一个节点而不是整个存储上运行

1 个答案: