Reduxで新しいストアを返す

Question

私は既存のアプリケーションに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 

は減速が呼び出される

export const ADD_COLLECTION = 'ADD_COLLECTION' 

let nextCollectionId = 2 

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

actions.jsので、私は問題があると思われます私が得るので、新しい状態オブジェクトを返すときに発生します（減速は間違っています）：

Uncaught TypeError: Cannot read property 'map' of undefined render @DivsContainer.js:

Answer 1

あなたのレデューサーはちょっと混乱しています。 collectionsReducerは配列を返しますが、initialStateは配列を持つオブジェクトです。

減速は、おそらく次のようになります。

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

とあなたのmapStateToPropsは以下のようになります。

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

あなたはpropsにstateをマッピングしているし、あなたの状態が{collections: []}ない{collectionsReducer: collections: []}

の形状をしているので、

Answer 2

あなたのレデューサーでは、ADD_COLLECTIONがaを返すためですラリー[何か]、それは{コレクション：何か}ではありません。そのため、減速機にはコレクションがなくなり、未定義の「マップ」に不満があります。あなたはあなたのADD_COLLECTIONに{collections：[something]}を返す必要があります