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

Question

所以我正在使用 React-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;
}

提前感谢您的所有建议或解决方案。

Answer 1

在您的case 'DELETE_HOSTNAME' 中，您正在调用state.filter。此时您的状态将是 Object 而不是数组。

你可能想要做这样的事情：

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