在 Redux 中返回新商店答案

【问题标题】：Returning new store in Redux在 Redux 中返回新商店
【发布时间】：2017-02-04 07:34:35
【问题描述】：

我正在向现有应用程序添加 redux，但我无法更新订阅到商店的组件的状态。我的设置的最小块：

DivsContainer.js

const DivsContainer = React.createClass({

  propTypes: {
    collections : PropTypes.array.isRequired
  },

  render() {
      return (
          <div onClick={this.props.onClick}>
            {this.props.collections.map((coll,  i) => (
              <div
                key={coll.id}
                name={coll.name}
                />
            ))}
        </div>
      )
  }

})

function mapStateToProps(state, ownProps) {
    return {
      collections: state.collectionsReducer.collections,
    }
}

function mapDispatchToProps (dispatch, ownProps) {
    return {
        onClick: () => {
            dispatch(addCollection())
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(DivsContainer)

Reducers.js

import {combineReducers} from 'redux'
import {ADD_COLLECTION, REMOVE_COLLECTION} from './actions'

const initialState = {
    collections: [
         {
             id: 1,
             name: "mock",
         }  
     }
    ]
}

function collectionsReducer(state = initialState, action) {

    switch (action.type) {
        case ADD_COLLECTION:
            return [
                ...state,
                {
                    id: action.id,
                    name: action.name,
                }
            ]
        default:
            return initialState
    }
}

const rootReducer = combineReducers({collectionsReducer})

export default rootReducer

actions.js

export const ADD_COLLECTION = 'ADD_COLLECTION'

let nextCollectionId = 2

export function addCollection() {
    return {
        type: ADD_COLLECTION,
        id: nextCollectionId++,
        name: 'mock',
    }
}

reducer被调用了，所以我怀疑返回新状态对象时出现问题（reducers不正确）因为我得到：

未捕获的类型错误：无法读取未定义渲染的属性“地图” @DivsContainer.js：

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

你的减速器有点搞砸了。 collectionsReducer 返回一个数组，但您的 initialState 是一个包含数组的对象。

reducer 大概应该是：

return {
    ...state,
    collections: [...state.collections, {id: action.id, name: action.name}],
};

你的mapStateToProps 应该是：

function mapStateToProps(state, ownProps) {
    return {
        collections: state.collections,
    };
}

因为您将 state 映射到 props 并且您的状态的形状是 {collections: []} 而不是 {collectionsReducer: collections: []}

【讨论】：

【解决方案2】：

这是因为在你的 reducer 中，ADD_COLLECTION 返回一个数组 [something]，它不是 {collections: something}。因此，reducer 不再有集合，它抱怨 undefined 的 'map' 。您需要在 ADD_COLLECTION 中返回 {collections: [something]}

【讨论】：