"Cannot read properties of undefined" Redux 工具包应用程序中查询初始状态的错误

Question

我正在尝试创建一个基本的Redux用例，以便在两个同级组件(SimpleFruit和FruitLabel(之间共享状态。我不明白为什么它总是遇到错误：Cannot read properties of undefined。由于我将初始状态设置为字符串，因此它不应运行到未定义状态问题AFAIK。我真的很想知道我做错了什么。

p.S. 我已经按照官方文档的建议使用npx create-react-app --template redux创建了该项目，因此配置应该可以正常工作。

编辑：正如Nils Hartmann在下面的评论中所解释的，我需要在我的组件上使用useSelector()。此外，为了保持不变性，需要通过回调传递调度。以下代码已随更改进行了更新

app/store.js:

import { configureStore } from '@reduxjs/toolkit';
import fruitReducer from '../features/fruits/fruitSlice';
export const store = configureStore({
reducer: {
fruit: fruitReducer,
},
});

状态/动作/减速器：features/fruitSlice.js

import { createSlice } from '@reduxjs/toolkit';
const initialState = {
fruitname: 'pineapple',
};
export const fruitSlice = createSlice({
name: 'fruit',
initialState,
reducers: {
setFruit: (state, action) => {
state.fruitname = action.payload;
}
}
})
export const selectFruit = (state) => state.fruit.fruitname;
export const { setFruit } = fruitSlice.actions;
export default fruitSlice.reducer;

组件1:功能/水果/SimpleFruit.js

import React from 'react';
import { selectFruit, setFruit } from './fruitSlice';
//import { useDispatch } from 'react-redux'; //PREVIOUS
import { useSelector, useDispatch } from 'react-redux'; //NEW
export function SimpleFruit(props) {
// Parameters
const {seller} = props;
// Store state
//const fruit = selectFruit(); //PREVIOUS
const fruit = useSelector(selectFruit); //NEW
const dispatch = useDispatch();
// Callbacks (NEW)
const handleChange = (e) => {
dispatch(setFruit(e.target.value)); // needed for setting value
}
// Render
return(
<div>
<p>SIMPLE FRUIT by <b>{seller}</b></p>
<label htmlFor="fname">Fruit Name:</label>
<input
type="text"
id="fname"
name="fname"
value={fruit}
onChange={handleChange}
/>
</div>
);
}

组件2:features/fruits/FruitLabel.js

import React from 'react';
import { selectFruit } from './fruitSlice';
import { useSelector } from 'react-redux'; //NEW
export function FruitLabel(props) {
// Store state
//const fruit = selectFruit(); //PREVIOUS
const fruit = useSelector(selectFruit); //NEW
// Render
return(
<h1>FRUIT IS {fruit}</h1>
);
}

最后，主应用程序：App.js:

import React from 'react';
import './App.css';
// Custom
import { SimpleFruit } from './features/fruits/SimpleFruit';
import { FruitLabel } from './features/fruits/FruitLabel';
function App() {
return (
<div className="App">
<SimpleFruit seller="John Doe" />
<FruitLabel />
</div>
);
}
export default App;

Answer 1

您需要将selectFruit传递给useSelector:

import { useSelector } from 'react-redux';
// ...
export function SimpleFruit(props) {
const fruit = useSelector(selectFruit);
// ...
}