如何通过 Redux action/reducer 正确调度变量

Question

我正在尝试通过我的操作传递我的 isMatched 变量，并根据从 post 路由发送的 json 响应有条件地更改布尔值。

但是，我当前的设置总是返回未定义的有效负载。我在这里缺少什么才能根据数据成功更改我的值？

    onSubmit = e => {
      e.preventDefault();


      const resetPassword = {
        email: this.username,
        password: this.state.password,
        password2: this.state.password2,
        isMatched: false
      };

      this.props.updateUserPassword(resetPassword);

    };



    // Reset Password action to dispatch isMatched to reducer

    export const updateUserPassword = resetPassword => dispatch => {
     axios
      .post("/api/users/resetpassword", resetPassword)
      .then(res => {

      if (res.data.msg === 'passwords match') {

        const isMatched = true;

        dispatch(setMatchedPass(isMatched));

      } else {

        const isMatched = false;

      }
    })
    };

    // Matched Password Dispatch
    export const setMatchedPass = isMatched => {
     return {
       type: SET_MATCH_PASS,
       payload: isMatched
       ***** If I set this to 'testing', that's output, but if *****
       ***** I try to dispatch the variable isMatched, it doesn't *****
       ***** seem to pass the value. *****
     };
    };


    // Matched Password Reducer

    import { SET_MATCH_PASS } from "../actions/types";

    const matchedState = {
      isMatched: false
    };

    export default function (state = matchedState, action) {

    switch (action.type) {

      case SET_MATCH_PASS:
        return {
          ...state,
          isMatched: action.payload
        };
      default:
        return state;

     } 

    }

编辑：定义 resetPassword 以将值传递给 updateUserPassword

/* Connect Mapstate to props */
export default connect(mapStateToProps, { updateUserPassword })(ResetPassword);

/* Connect Mapstate to props */
export default connect(mapStateToProps, { updateUserPassword })(ResetPassword);

Answer 1

如果没有全貌，就很难进行调试。但请确保type您使用的操作和减速器相同。

查看数据如何传输以及在何处中断。

// Matched Password Dispatch
export const setMatchedPass = isMatched => {
 console.log('setting isMatched for SET_MATCH_PASS action: ', isMatched, SET_MATCH_PASS);
 return {
   type: SET_MATCH_PASS, // make sure this type is the same as in reducer
   payload: isMatched
 };
};

然后检查您的减速器 - 操作和有效负载：

export default function (state = matchedState, action) {
     console.log('Checking again', action.type, action.payload);
     switch (action.type) {
          case SET_MATCH_PASS:
               ...
          default:
     return state;

     }
}

编辑（根据state控制台日志更新）：展示如何从 redux 检索值

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';


const MyComponent = ({
  isMatched
}) => {
  /**
   * It will re-render each time the value of `isMatched` is changed
   */
  return (
    <div>
      {console.log('in render', isMatched) // what value do you see here?}
      {isMatched && <div>If you see this, the password is correct</div>}
    </div>

  );
};

MyComponent.propTypes = {
  isMatched: PropTypes.bool,
};

const mapStateToProps = state => {
  // your value on state is stored in `match` 
  return {
    isMatched: state.match.isMatched,
  }
};

export default connect(
  mapStateToProps,
  null
)(MyComponent);