【发布时间】：2023-03-22 15:35:01
【问题描述】：
我写了一个通用的表格组件，用两个不同的数据集实例化了两次。我使用 Redux 存储来补充道具，并在单击时尝试删除一行。
组件显示良好，onClick 函数被触发，reducer 被调用。新返回的状态返回之前没有单击元素的状态。
我的问题是组件没有重新渲染。 根据故障排除页面（http://redux.js.org/docs/Troubleshooting.html），似乎我没有改变以前的状态（也许我只是不明白该怎么做），我正在调用 dispatch() 函数，而我的 mapStateToProps 似乎是正确的数据在页面加载时显示良好。
我试图在 reducer.js 中定义初始状态 > 表函数，而不是使用 createStore 函数，我试图将“tables”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>
);
}
}
域名.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 与 domain.js 相同，但 const / 类名和 props 不同
【问题讨论】：
-
@mbehrlich 是正确的 - 你正在变异。请阅读 Redux 文档的 Immutable Update Patterns 部分了解更多信息。
标签： javascript reactjs redux babeljs