我正在尝试将Redux实施到我的应用中。因此,我创建了动作,reducer,store等...,现在我必须将状态传递给reducer并更改此参数的值(布尔值)。我不知道我在做什么错。alert
单击按钮后触发一个in reducer,但dialog
不会关闭。任何想法如何改变价值open
?
行动
export const checkPassword = () => ({
type: "CHECK_PASSWORD"
});
零件
const mapDispatchToProps = dispatch => {
return {
checkPassword: () => dispatch({type: 'CHECK_PASSWORD'})
};}
function mapStateToProps(state, open) {
return {
open: state.open,
};}
class StartDialog extends Component {
constructor(props) {
super(props);
this.state = { open: true };
}
render() {
const actions = [ <FlatButton label="Submit" onClick={this.props.checkPassword} /> ];
return (
<Dialog title="Welcome to the React App!" actions={actions} open={this.state.open} ></Dialog>
);}}
const StartForm = connect(mapStateToProps, mapDispatchToProps)(StartDialog);
export default StartForm;
减速器
import { CHECK_PASSWORD } from "../constants/action-types";
const initialState = {
open: true
};
const checkpasswordReducer = (state = initialState, action) => {
switch (action.type) {
case CHECK_PASSWORD:
alert('action!')
return {...state, open: false};
default:
return state;
}};
export default checkpasswordReducer;
商店
import { createStore } from "redux";
import rootReducer from "../reducers/index";
const store = createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
);
export default store;
减速器index.js
import { combineReducers } from "redux";
import checkpasswordReducer from "./checkpasswordReducer";
export default combineReducers({ checkPassword: checkpasswordReducer
});
open
将props
不在state
将渲染更改为此
<Dialog title="Welcome to the React App!" actions={actions} open={this.props.open} ></Dialog>
同样在mapStateToProps
函数open
值中将在状态对象中,因此您不需要函数中的第二个参数
function mapStateToProps(state) {
return {
open: state.checkPassword.open,
};
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句