存储显示在mapStateToProps方法上的属性，但存储在redux-dev-tools上的属性为空

Question

当我在Bugs.js的第21行上进行控制台时，它显示了我发送的操作的结果，但是当我在li标记上打印数据时…它是空白的。在redux-dev-tools

中也不会更改存储这是我的App.js代码

function App() {
const store = configureStore()
return (
<Provider store={store}>
<Bugs />
</Provider>
);
}
export default App;

Bugs.js的

const Bugs = (props) => {
useEffect(props.addBug, [])
return (
<ul>
{
props.bugs.map(bug => {
<li>
{bug.description}
</li>
})
}
</ul>
)
}
const mapStateToProps = state => {
console.log('Aftab', state.bugs);
return (
{
bugs: state.bugs
})
}
const mapDispatchToProps = dispatch => {
return (
{
addBug: () => dispatch(addBug({ description: 'Bug 1' }))
}
)
}
export default connect(mapStateToProps, mapDispatchToProps)(Bugs)

那就是减速机

let lastId = 0
const slice = createSlice({
name: 'bugs',
initialState: [],
reducers: {
addBug: (bugs, action) => {
bugs.push({
id: lastId++,
description: action.payload.description,
resolved: false
})
},
resolveBug: (bugs, action) => {
const index = bugs.findIndex(b => b.id === action.payload.id)
bugs[index].resolved = true
},
assignBug: (bugs, action) => {
const index = bugs.findIndex(b => b.id === action.payload.bugId)
bugs[index].userId = action.payload.userId
}
}
})
export const { addBug, resolveBug, assignBug } = slice.actions
export default slice.reducer
export const getBugList = userId => createSelector(
state => state.entities.bugs,
bugs => bugs.filter(b => b.userId === userId)
)

Answer 1

您需要调用分派函数才能工作

在你的Bugs.js变化

useEffect(props.addBug, [])

:

useEffect(props.addBug(), [])