Question

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

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

{expanded: false}

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

我有一个主页，该主页能够获取商店的初始状态，但是，sidenav用来更新商店的操作不会重新渲染（按比例更改）主页。

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

React Redux - changes aren't reflected in component

下面是代码。

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切换（控制台在每次切换时记录新状态）

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

您需要声明action creators（函数）以返回操作（对象）：

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函数，并在化简器中进行切换：expanded: !state.expanded，或将expanded标志传递为有效载荷。

Answer 2

像这样更改mapStateToProps函数：

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

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

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

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

2 个答案:

其他