0
我寫了一個泛型表組件，使用兩個不同的數據集創建兩次。我使用Redux商店來保護道具，當我點擊它時嘗試刪除一行。React + Redux：reducer將不會重新加載組件
組件顯示良好，onClick函數被觸發並調用reducer。新的返回狀態返回之前的狀態，但沒有單擊元素。
我的問題是，組件不重新呈現。 根據故障排除頁面（http://redux.js.org/docs/Troubleshooting.html），似乎我不改變以前的狀態（也許我只是不明白該怎麼做），我打電話dispatch（）函數，我的mapStateToProps似乎是正確的因爲數據在頁面加載時很好地顯示。我嘗試在reducer.js>表函數中定義初始狀態，而不是使用createStore函數來執行它，我試圖將'表'reducer拆分爲'domains'和'hosts'reducer（重複代碼），我嘗試了不使用combineReducers（），因爲我只有一個（但我將來會有更多），我嘗試了很多東西，所以我不記得了。
我敢打賭，這不是什麼大不了的事，但我無法弄清楚發生了什麼。你能幫我嗎 ？非常感謝你。
reducer.js
import { combineReducers } from 'redux'
import { DELETE_DOMAIN, DELETE_HOST } from './actions'
function deleteItem(state, index) {
let newState = Object.assign({}, state)
newState.items.splice(index, 1)
return newState
}
function tables(state = {}, action) {
switch (action.type) {
case DELETE_HOST:
return Object.assign({}, state, {
hosts: deleteItem(state.hosts, action.host)
})
case DELETE_DOMAIN:
return Object.assign({}, state, {
domains: deleteItem(state.domains, action.domain)
})
default:
return state
}
}
const reducers = combineReducers({
tables,
})
export default reducers
actions.js
export const DELETE_DOMAIN = 'DELETE_DOMAIN'
export const DELETE_HOST = 'DELETE_HOST'
export function deleteDomain(domain) {
return { type: DELETE_DOMAIN, domain }
}
export function deleteHost(host) {
return { type: DELETE_HOST, host }
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducers from './reducers'
const initialState = {
tables: {
domains: {
headers: {
id: 'Id',
domain: 'Domain',
host: 'Hoster',
},
items: [
{
id: 1,
domain: 'dev.example.com',
host: 'dev',
},
{
id: 2,
domain: 'prod.example.com',
host: 'prod',
}
]
},
hosts: {
headers: {
id: 'Id',
label: 'Label',
type: 'Type',
hoster: 'Corporation',
},
items: [
{
id: 1,
label: 'Server 1',
type: 'Server type',
hoster: 'Gandi',
},
{
id: 2,
label: 'Server 2',
type: 'Server type',
hoster: 'OVH',
}
]
}
}
}
let store = createStore(reducers, initialState)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
app.js
import React from 'react';
import Domains from './modules/domains.js';
import Hosts from './modules/hosts.js';
import Nav from './modules/nav.js';
import {
BrowserRouter as Router,
Route,
} from 'react-router-dom'
export default class App extends React.Component {
render() {
return (
<Router>
<div className="container-fluid col-md-6">
<Nav />
<Route path="/domains" component={Domains}/>
<Route path="/hosts" component={Hosts}/>
</div>
</Router>
);
}
}
domain.js
import React from 'react';
import Table from './../components/table.js';
import { connect } from 'react-redux'
import { deleteDomain } from './../actions'
const mapStateToProps = (state) => {
return state.tables.domains
}
const mapDispatchToProps = (dispatch) => {
return {
onRowClick: (id) => {
dispatch(deleteDomain(id))
}
}
}
class DomainsView extends React.Component {
render() {
return (
<Table headers={this.props.headers} items={this.props.items} onRowClick={this.props.onRowClick} />
)
}
}
const Domains = connect(
mapStateToProps,
mapDispatchToProps,
)(DomainsView)
export default Domains
hosts.js 同用型動物常量/類名domains.js和道具
@mbehrlich是正確的 - 你會改變。請閱讀Redux文檔的[不可變更新模式]（http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html）以獲取更多信息。 – markerikson