我不能在 Redux reducer 中使用 state.filter
I can't use state.filter in Redux reducer
所以我正在使用 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;
}
提前感谢您提出所有建议或解决方案。
在您的 case 'DELETE_HOSTNAME'
中,您正在呼叫 state.filter
。此时您的状态将是 Object
而不是数组。
您可能想做这样的事情:
case 'DELETE_HOSTNAME':
return { hostnames: state.hostnames.filter(hostname =>
hostname.id !== action.hostnameId
)}
所以我正在使用 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;
}
提前感谢您提出所有建议或解决方案。
在您的 case 'DELETE_HOSTNAME'
中,您正在呼叫 state.filter
。此时您的状态将是 Object
而不是数组。
您可能想做这样的事情:
case 'DELETE_HOSTNAME':
return { hostnames: state.hostnames.filter(hostname =>
hostname.id !== action.hostnameId
)}