Question

我正在尝试打开一个菜单。单击可调用this.props.openMenu。请注意，openMenu由mapDispatchToProps放置在props中（通过在组件导出上通过connect调用），并且我已经确认使用print语句可以按预期工作。调度后，我的减速器将执行操作并返回一个对象。该对象没有出现在我的组件道具中，就像我认为使用mapStatetoProps时那样。我认为问题可能出在我的组件中mapStateToProps无法识别由我的reducer返回的对象，结果，componentDidUpdate（）没有触发并且菜单没有打开？我什么都没变。

更新：在console.loging this.props.menu.action之后，我发现动作实际上已放入props中。现在，这使我认为问题出在我的派遣上。

这是我的减速器：

// Reducer for Menu in HomeScreen.js

const initialState = {
  action: "",
};

export default (state = initialState, action) => {
  switch (action.type) {
    case "OPEN_MENU":
      console.log("processing");
      console.log("state", state);
      return {
        ...state,
        action: "openMenu",
      };
    case "CLOSE_MENU":
      return {
        ...state,
        action: "closeMenu",
      };
    case "OPEN_ADD_GROUP":
      return {
        ...state,
        action: "openAddGroup",
      };
    case "CLOSE_ADD_GROUP":
      return {
        ...state,
        action: "closeAddGroup",
      };
    default:
      return state;
  }
};

这是我的组成部分：

import React, { Component } from "react";
import Menu from "../components/MenuScreen";
import { connect } from "react-redux";
import { openMenu } from "../actions/menuaction";

Amplify.configure(amplify);

function mapStateToProps(state) {
  return { action: state.action };
}

function mapDispatchToProps(dispatch) {
  return {
    openMenu: () =>
      dispatch({
        type: "OPEN_MENU",
      }),
  };
}

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.action != this.props.action) {
      this.toggleMenu();
    }
  }

  toggleMenu = () => {
    if (this.props.action == "openMenu") {
      Animated.timing(this.state.scale, {
        toValue: 0.9,
        duration: 300,
        easing: Easing.in(),
      }).start();
      Animated.spring(this.state.scale, {
        toValue: 0.5,
      }).start();

      StatusBar.setBarStyle("light-content", true);
    }

    if (this.props.action == "closeMenu") {
      Animated.timing(this.state.scale, {
        toValue: 1,
        duration: 300,
        easing: Easing.in(),
      }).start();
      Animated.spring(this.state.scale, {
        toValue: 1,
      }).start();

      StatusBar.setBarStyle("dark-content", true);
    }
  };

  render() {
    return (
     <TouchableOpacity onPress={this.props.openMenu}>
      <Avatar source={require("../../assets/profilepic.jpg")} />
     </TouchableOpacity>
    );
  }
}

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

这是我的configureStore：

import { createStore, combineReducers, applyMiddleware } from "redux";
import menureducer from "../reducers/menureducer";
import thunk from "redux-thunk";

export default () => {
  const store = createStore(
    combineReducers({
      menu: menureducer,
    }),
    applyMiddleware(thunk)
  );

  return store;
};

这是我的App.js文件：

const store = configureStore();
console.log("state: ", store.getState());

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Authentication />
      </Provider>
    );
  }
}

export default App;

Answer 1

我想问题是您的mapStateToProps函数

让我们尝试记录您的状态以查看您拥有什么。

参见configureStore

const store = createStore(
    combineReducers({
      menu: menureducer,
    }),
    applyMiddleware(thunk)
  );

您将其命名为menu

function mapStateToProps(state) {
  return { action: state.menu.action };
}

组件道具中的Redux对象未更新

1 个答案: