Redux MapDispatchToProps不能工作

Question

所以我对Redux很陌生，我试着让这个基本模型正常工作，这样我就可以快速完成一个小的个人项目，我设置了所有的东西，没有错误，但是我正在尝试测试，我的功能不起作用，所以我希望有人能指出我错过了什么。

我遵循了多个不同的教程，每个教程都有不同的方法，因此我损失了一点，为此我表示歉意。

我的store.js看起来是这样

import rootReducer from "./reducers";
import thunk from "redux-thunk";
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

我在还原器文件夹和auth:指向combineReducers文件的index.js中使用了一个authReducer.js文件，即

const INIT_STATE = {
  email: "",
  password: "",
  isLoggedIn: "false"
};

export default (state = INIT_STATE, action) => {
  switch (action.type) {
    case IS_LOGGED_IN_CHANGE:
      console.log(action);
      return {
        isLoggedIn: action.value
      };
    default:
      return state;
  }
};

现在我的目标是要有一个按钮，将"IsLoggedIn“初始状态更改为真字符串，而不是false，我已经进入actions文件夹，并创建了一个authActions.js，如下所示

import { IS_LOGGED_IN_CHANGE } from "../actions/types";
import store from "../store";

export const isLoggedInChange = value => {
  return dispatch => {
    dispatch({
      type: IS_LOGGED_IN_CHANGE,
      value
    });
  };
};

最后，我想向您展示我的组件页面，它显示了所有这些，如下所示

import { connect } from "react-redux";

import styles from "./Landing.module.css";
import { isLoggedInChange } from "../../actions/authActions";

class Landing extends Component {
  makeTrue = () => {
    isLoggedInChange("true");
  };

  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
  }
  render() {
    return (
      <div className={styles.background}>
        <button onClick={this.makeTrue}>MAKE TRUE</button>
        {this.props.isLoggedIn}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  isLoggedIn: state.auth.isLoggedIn
});

const mapDispatchToProps = dispatch => ({
  isLoggedInChange: value => dispatch(isLoggedInChange(value))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Landing);

你能告诉我是不是掉了什么东西做这个吗？为什么按钮不更改存储状态？提亚

Answer 1

这里有两个问题。您直接调用您的动作创建者而不是props.isLoggedInChange

  makeTrue = () => {
    this.props.isLoggedInChange("true");
  };

你需要在你的行动中传播旧的状态

case IS_LOGGED_IN_CHANGE:
  console.log(action);
  return {
    ...state,
    isLoggedIn: action.value
  };

不是我的mapDispatchToProps的重点，它可以像我刚才所做的那样立即使用这个函数

是的，问题是mapDispatchToProps将封装在dispatch中的函数(或多个函数)注入到props中。

import { actionCreator } from './actions

const mapDispatchToProps = dispatch =>({
    actionCreator : () => dispatch(actionCreator)
})  

现在您有了两个actionCreator，一个在作用域中(它是您的动作创建者)全局可用，而props.actionCreator是包装在dispatch中的原始动作创建者。因此，当您从组件内部调用actionCreator()时，它不会抛出任何错误(因为在作用域中有一个名为actionCreator的函数，但是您将调用错误的函数，正确的函数位于props.actionCreator。

，我为什么要散布这个州？

还原器是一个纯函数，它接收state和action并返回新的状态。当你回来的时候

return {
    isLoggedIn : true
}

实际上，您正在覆盖原始状态(其中包含其他属性)，因此首先需要spread原始状态以维护其结构完整性，并且覆盖您想要的属性

return{
   ...state,
   isLoggedIn : !state.isLoggedIn
}

Answer 2

Redux状态是不可变的，因此您需要返回一个全新的状态实例，将还原器状态更改为下面的状态。

export default (state = INIT_STATE, action) => {
   switch (action.type) {
    case IS_LOGGED_IN_CHANGE:
       console.log(action);
       return Object.assign({}, state, {
         isLoggedIn: action.value
       });
    default:
      return state;
  }
};

关键的区别在于

return Object.assign({}, state, {
         isLoggedIn: action.value
       });

以我在这里使用它的方式，Object.assign将状态对象组合成一个全新的对象。检查redux还原器中的不可变性，我建议将redux不可变状态不变量作为dev包添加，它可以检测您何时直接修改状态，并帮助指出如下错误

Answer 3

使用isLoggedIn的新值返回状态。这样使用减速机：

case IS_LOGGED_IN_CHANGE:
  console.log(action);
  return {
    ...state,
    isLoggedIn: action.value
  };