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

Question

我是Redux的新手,我一直很难对商店进行更改.我一直在使用Redux-DevTools来探索状态变化,这是我的问题.

我有一个侧边栏,其状态为true/false.初始状态如下.

{expanded: false}

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

我有一个主页,它能够获取商店的初始状态,但更新商店的sidenav的操作不会重新呈现(props val dint change)主页.

我强烈认为这个问题与这个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;   
 }
}

SideBar Toggle(控制台在每个切换上记录新状态)

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 DevTools

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标志作为有效负载传递.