redux - Redux 在另一个组件中访问状态
问题描述
我无法访问组件中的状态。我有一个组件(添加页面),用户在其中添加“名称”和“权重”。当用户单击提交时,我希望添加的“名称”和“重量”显示在另一个组件(主页)上。当我在主页中控制台记录状态时,我得到未定义。我的 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);
任何帮助,将不胜感激!
解决方案
代替
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)