Redux正在访问另一个组件中的状态

Question

我在访问组件中的状态时遇到问题。我有一个组件(添加页面(，用户在其中添加"名称"one_answers"权重"。我希望在用户单击提交时，将添加的"名称"one_answers"重量"显示在另一个组件(主页(上。当我在主页中控制台记录状态时，我会得到未定义。我的DevTools显示状态正在更新，添加了名称和权重，但我不知道如何访问它。以下是我的行动：

export const getMovements = (name) => {
return {
type: constants.GET_MOVEMENTS,
name,
}
};
export const addMovement = (name, weight) => {
history.push('/')
return {
type: constants.ADD_MOVEMENT,
name, 
weight,
}
};

以下是我的减速器：

const initialState = {
name: [],
weight: [],
};
const addMovementReducer = (state = initialState , action) => {
switch (action.type) {
case ADD_MOVEMENT:
return { ...state, name: action.name, weight: action.weight }
default:
return state;
}
};
const getMovementsReducer = (state = {}, action) => {
switch (action.type) {
case GET_MOVEMENTS:
return { ...state, name: action.name, weight: action.weight }
default:
return state;
}
};

这是我的添加页面组件：

const AddPage = () => {
const [name, setName] = useState('');
const [weight, setWeight] = useState(0);
const classes = useStyles();
const dispatch = useDispatch();
console.log(name, weight);
return (
<div>
<Header title="Add Page" />
<div className={classes.addPage}>
<div className={classes.addMovementDiv}>
<TextField 
className={classes.movementName} 
key="name" 
label="Enter Movement Name" 
InputProps= {{className: "textBoxColor"}}
variant="outlined"
onChange={event => {
const { value } = event.target;
setName(value);
}} 
/>    
<TextField 
className={classes.movementWeight} 
key="weight" 
label="Enter Movement Weight" 
type="number" 
variant="outlined"
onChange={event => {
const { value } = event.target;
setWeight(value);
}}
InputProps= {{endAdornment: <InputAdornment position="end">lb</InputAdornment>, className: "textBoxColor"}} />
<Button 
className={classes.addButton}
variant="outlined"
onClick={() => dispatch(addMovement(name, weight))}
>
<AddCircleIcon />
</Button>
</div>
</div>
</div>
);
};
const mapStateToProps = (state) => {
return {
name: state.name,
weight: state.weight,   
}   
};
const mapDispatchToProps = (dispatch) => {
return({
addMovement: (name, weight) => dispatch(addMovement(name, weight))
})
};
const withConnect = connect(
mapStateToProps,
mapDispatchToProps,
);
export default compose(withConnect)(AddPage);

这是我的主页组件：

const HomePage = (props) => {
const classes = useStyles();
const newMovements = props.name;
return (
<div>
<Header title={"Home Page" }/>
{newMovements}
<div className={classes.fabDiv}>
<Fab 
className={classes.fab}
onClick={() => history.push(`/add`)}>  
<AddIcon />      
</Fab>
</div>
</div>
);
};
const mapStateToProps = (state) => {
return {
name: state.name
}  
};
const mapDispatchToProps = (dispatch) => {
return({
getMovements: (name) => dispatch(getMovements(name))
})
};
const withConnect = connect(
mapStateToProps,
mapDispatchToProps,
);
export default compose(withConnect)(HomePage);

任何帮助都将不胜感激！

Answer 1

而不是

const [name, setName] = useState('');
const [weight, setWeight] = useState(0);

非Redux组件本地状态，则必须使用连接的props.name和props.weight。

由于您使用的是功能组件和钩子，因此还可以使用react redux钩子useSelector和useDispatch，这比使用connect要容易得多。

所以跳过所有的connect、mapStateToProps和props.name，只做

const name = useSelector(state => state.name)
const weight = useSelector(state => state.weight)