Reduxレデューサーでstate.filterを使用できません

Question

私はReact-Reduxを使用しています。私のレデューサーでは自分の状態からホスト名を削除したいと思います。だから周りを見て、私はstate.filterがこれを達成する良い方法だと分かった。しかし、これは動作していない、私は私のコンソールでエラーが発生し続けます。

index.jsすべての提案や解決策を事前に

import "babel-polyfill"; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Provider} from 'react-redux'; 
import thunkMiddleware from 'redux-thunk'; 
import createLogger from 'redux-logger' 
import { HostnameAppContainer } from './components/HostnameApp'; 
import {createStore, applyMiddleware} from 'redux'; 
import hostnameApp from './reducer' 
import {fetchHostnames} from './action_creators' 

const loggerMiddleware = createLogger() 

const store = createStore(
    hostnameApp, 
    applyMiddleware(
     thunkMiddleware, // lets us dispatch() functions 
     loggerMiddleware // neat middleware that logs actions 
    ) 
) 

store.dispatch(fetchHostnames()) 

ReactDOM.render(
    <Provider store={store}> 
     <HostnameAppContainer /> 
    </Provider>, 
document.getElementById('app') 
) 
; 

reducer.js

export default function(state = {hostnames:[]}, action) { 
    switch (action.type) { 
     case 'FETCH_HOSTNAMES': 
      return Object.assign({}, state, { 
       hostnames: action.hostnames 
      }) 
     case 'DELETE_HOSTNAME': 
      return state.filter(hostname => 
       hostname.id !== action.hostnameId 
      ) 
     case 'ADDED_HOSTNAME': 
      return Object.assign({}, state, { 
       hostnames: [ 
        ...state.hostnames, 
        action.object 
       ] 
      }) 
    } 
    return state; 
} 

ありがとう。

Answer 1

case 'DELETE_HOSTNAME'にはstate.filterと電話しています。この時点での状態はObjectであり、配列ではありません。

あなたは、おそらくこのような何かをしたいと思うでしょう：完璧に動作

case 'DELETE_HOSTNAME': 
    return { hostnames: state.hostnames.filter(hostname => 
    hostname.id !== action.hostnameId 
)}