我不能在Redux reducer中使用state.filter

所以我使用了React-Redux，在我的reducer中我想從我的狀態中刪除一個主機名。所以從四處看，我發現state.filter是實現這一目標的好方法。但是，這是行不通的，我一直在我的控制檯發生錯誤。我不能在Redux reducer中使用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; 
}

error

三江源提前爲所有的建議或解決方案。

來源

2016-04-24 Matthias

在你的case 'DELETE_HOSTNAME'你打電話state.filter。此時你的狀態將是Object而不是數組。

你可能會想要做這樣的事情：

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

來源

2016-04-24 14:10:24 Clarkie

完美的作品。還有一個問題，如果你想複製你的狀態，然後改變副本，所以你仍然保持以前的狀態。在這個例子中，你如何「複製」你的舊狀態？ – Matthias

[filter（）方法創建一個新數組，其中包含所有通過由提供的函數實現的測試的元素。]（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/過濾）。雖然數組可能是新的，但它只是指向每個主機名的指針的副本，所以請小心修改主機名的內容。 – Kujira

@Kujira你確定嗎？來源？ – softcode

我不能在Redux reducer中使用state.filter

回答

相關問題