无法更改redux布尔状态

Question

我觉得有点困惑，问题是defineAvailableTouch动作和状态更新连接到它。

这是我的代码：

操作/ index.js

 import {
    ANIMATE_HELLO,
    HANDLE_SCROLL,
    IS_TOUCH_DEVICE,
    SET_ABOUT_TOP,
    SET_CONTACT_TOP,
    SET_PORTFOLIO_TOP
} from "../Constants/ActionTypes";

export const animateHello = hello => ({
    type: ANIMATE_HELLO,
    payload: hello
});

export const handleScroll = scrollDelta => ({
    type: HANDLE_SCROLL,
    payload: scrollDelta
});

export const defineTouchAvailable = isTouchDevice => ({
    type: IS_TOUCH_DEVICE,
    payload: isTouchDevice
});

export const setAboutTop = aboutTop => ({
    type: SET_ABOUT_TOP,
    payload: aboutTop
});

export const setContactTop = contactTop => ({
    type: SET_CONTACT_TOP,
    payload: contactTop
});

export const setPortfolioTop = portfolioTop => ({
    type: SET_PORTFOLIO_TOP,
    payload: portfolioTop
});

减速器/ index.js

 import {
    IS_TOUCH_DEVICE,
 } from "../Constants/ActionTypes";
 import { initialState } from "../Constants/InitialState/InitialState";

 export const rootReducer = (state = initialState, action) => {
     switch(action.type) {
          case ANIMATE_HELLO:
              return {
                  ...state,
                  hello: action.payload
              };
          case HANDLE_SCROLL:
              return {
                  ...state,
                  scrollState: action.payload
          };
          case IS_TOUCH_DEVICE:
             console.log(action.payload); //!!!!!! THIS PRINTS EXPECTED VALUE !!!!!!!!!!
             return {
                  ...state,
                  isTouchDevice: action.payload
          };
          case SET_ABOUT_TOP:
              return {
                   ...state,
                   aboutTop: action.payload
          };
          case SET_CONTACT_TOP:
              return {
                  ...state,
                  contactTop: action.payload
          };
          case SET_PORTFOLIO_TOP:
              return {
                  ...state,
                  portfolioTop: action.payload
              };
          default:
              return state
      }
 };

InitialState.js

export const initialState = {
    scrollState: 0,
    hello: 'H',
    aboutTop: 0,
    portfolioTop: 0,
    contactTop: 0,
    isTouchDevice: true
};   

App.js

import React, { Component } from 'react';
import { connect } from "react-redux";

import About from "./Containers/About";
import Contact from "./Containers/Contact";
import Page from "./Containers/Page";
import Projects from "./Containers/Projects";
import {
    defineTouchAvailable,
    handleScroll
} from "./Actions";

window.onbeforeunload = () => {
    handleScroll(0);
    document.documentElement.scrollTop = 0;
};

const mapStateToProps = state => {
    return {
        isTouchDevice: state.isTouchDevice
    }
};

const dispatchStateToProps = dispatch => {
    return {
        defineTouchAvailable: isTouchDevice => 
dispatch(defineTouchAvailable(isTouchDevice)),
        handleScroll: scrollState => dispatch(handleScroll(scrollState))
    }
};

class App extends Component {

    componentDidMount() {
        try {
            document.createEvent('touchevent');
            this.props.defineTouchAvailable(true);
        } catch(e) {
            this.props.defineTouchAvailable(false);
        }

        console.log(this.props.isTouchDevice); //!!!!!!!!!!!!!!! THIS ALWAYS PRINTS VALUE FROM initialState !!!!!!!!!!!!!!

        if(this.props.isTouchDevice) {
            document.documentElement.scroll(0, 1);
        }

        document.addEventListener('scroll', () => {
            if (document.documentElement.scrollTop === 0) {
                this.props.handleScroll(0);
            }
        });
    }

    render() {
        return (
            <div>
                <Page/>
                <Projects/>
                <About/>
                <Contact/>
            </div>
        );
    }
}

export default connect(mapStateToProps, dispatchStateToProps)(App);

我真的不知道这里有什么不对。

正如我评论的那样

• reducer console.log打印出预期分配给我的状态的正确值（isTouchDevice字段），但是
• 在调度操作中分配后，没有任何变化 - 它始终是来自initialState的值。

有人可以向我解释一下吗？我是否错误地更改了redux状态？那么为什么其他行动会像预期的那样发挥作用呢？

Answer 1

isTouchDevice的更新值将在componentDidUpdate，render或componentWillReceiveProps中提供，而不是在componentDidMount中。

componentDidMount只会在安装组件时调用一次。

注意：componentWillReceiveProps已弃用，最好不要使用它。