还原。将状态值传递给减速器

Question

我正在尝试在我的应用中实现 Redux。所以，我创建了动作、reducer、store 等......现在我必须将状态传递给 reducer 并更改此参数的值（布尔值）。我不知道我做错了什么。单击按钮后会触发减速器中的alert，但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;

reducer index.js

import { combineReducers } from "redux";
import checkpasswordReducer from "./checkpasswordReducer";

export default combineReducers({ checkPassword: checkpasswordReducer 
});

Answer 1

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,
   };
}

Answer 2

当您使用redux 并从store 读取值时，您需要在组件中从props 使用它。简而言之，您不应该有一个可以直接从props 派生的state。将您的组件更改为下面，它应该可以工作

class StartDialog extends Component {

    render() {
       const actions = [ <FlatButton label="Submit" onClick={this.props.checkPassword} /> ];

       return (
          <Dialog title="Welcome to the React App!" actions={actions} open={this.props.open} ></Dialog>
       );
    }
}

同样在你的 mapStateToProps 中你需要正确访问 state，如果你使用 combineReducers，你需要从相应的 reducer 访问 open 值

所以如果你使用combineReducer 喜欢

const reducers = combineReducer({
   checkPassword:checkpasswordReducer
})

你需要使用你的mapStateToProps函数

function mapStateToProps(state) {
   return {
       open: state.checkPassword.open,
   };
}