React-Redux组件不反映Redux Store中的更改

Question

我是Redux的新手，我一直很难呈现对商店所做的更改。 我一直在使用Redux-DevTools探索状态变化，这是我的问题。

我有一个侧边栏，其状态已扩展为true / false。 初始状态如下。

{expanded: false}

在切换动作期间，我触发store.dispatch将状态更改为true。 在React-DevTools中，我可以看到我的状态正在更改，当从我的sidenav组件中执行时，控制台也会记录更改。

我有一个主页，该主页能够获取商店的初始状态，但是，从sidenav更新商店的操作不会重新呈现该主页。

我强烈认为问题与该SO帖子有关，但无法绕开包装的组件概念。 任何建议。

React Redux-更改未反映在组件中

下面是代码。

Redux商店

const rootReducer = combineReducers({
    sideBarReducerMain: sidebarReducer })

export const configurestore = () => {
    const store = createStore(rootReducer, composeWithDevTools(
      ));

    return store; }

动作发生器

export const onExpand = {
    type: 'EXPAND',
    payload: {
        expanded: true
    }
}

export const onCollapse = {
    type: 'COLLAPSE',
    payload: {
        expanded: false
    }
}

减速器

export const sidebarReducer = (state = {expanded:false},action) => {
 switch (action.type) {
     case 'EXPAND':
        return Object.assign({}, state, {expanded: true})
     case 'COLLAPSE':
        return Object.assign({}, state, {expanded: false})
    default:
        return state;   
 }
}

侧边栏切换（控制台在每次切换时记录新状态）

onToggle = (expanded) => {

    expanded ? store.dispatch(onExpand):store.dispatch(onCollapse)
    this.setState({ expanded: expanded });

    //outputs the state change looks fine.
    console.log("State of store :: " + store.getState());

};

主页

import React from 'react';
import styled from 'styled-components'
import Main from './MainAlign'
import { connect } from 'react-redux'

class HomePage extends React.Component {


 getExpansionState() {
  console.log("From render" + this.props.expandedState)
    return this.props.expandedState
 }

 componentWillReceiveProps(nextProps) {
  console.log("Looks like this never gets called :( " + this.props.expandedState)
}


  render(props) {

      return (
        <div>
        <Main expanded={this.getExpansionState()}>
        <h1>Welcome</h1>
        <p>This is my site. Take a look around!</p>
        </Main>  
        </div>
      )


  }

}

const mapStateToProps = state => {
  console.log("New state " + state.expanded)
  return {
    expandedState: state.expanded
  }
}

export default connect(mapStateToProps)(HomePage);

REDUX开发工具

Answer 1

您需要声明返回操作（对象）的操作创建者 （函数）：

export const onExpand = () => ({
  type: "EXPAND",
  payload: {
    expanded: true
  }
});

然后，而不是调用store.dispatch ，应该连接操作创建者：

withRouter(connect(null, { onExpand, onCollapse })(SideBar))

并在您的组件中调用它：

if (expanded) {
  this.props.onExpand();
} else {
  this.props.onCollapse();
}

工作代码：

杂项

this.setState({ expanded: expanded });
console.log("FROM SIDENAV" + this.state.expanded);

setState是异步的，因此您需要使用回调来访问更新的值：

this.setState({ expanded }, () => console.log("FROM SIDENAV" + this.state.expanded));

同样，也无需在本地组件（单个事实来源）中复制redux状态。

您还可以将onExpand和onCollapse合并为一个onToggle函数，并在reducer中执行以下切换expanded: !state.expanded ，或将expanded标志作为有效载荷传递。

Answer 2

像这样更改mapStateToProps函数：

const mapStateToProps = state => {
  console.log("New state " + state.expanded)
  return {
    expandedState: state.sideBarReducerMain.expanded
  }
}

您的root（全局）状态中有sideBarReducerMain状态。 sideBarRecuerMain状态的扩展值不是全局值。

而且，您不需要动作创建者的有效载荷，因为您不使用它们。 只需一种类型就足以满足您的逻辑。