Компонент React-Redux не отражает изменения в Redux Store

Question

Я новичок в Redux, и мне было тяжело рендерить изменения, сделанные в магазине. Я использовал Redux-DevTools для изучения изменений состояния, и вот моя проблема.

У меня есть боковая панель с расширенным состоянием как true / false. Начальное состояние ниже.

{expanded: false}

Во время действия переключения я запускаю store.dispatch, чтобы изменить состояние на true. В React-DevTools я мог видеть, что мое состояние изменяется, консоль также регистрирует изменения при выполнении из моего компонента sidenav.

У меня есть домашняя страница, которая может извлечь начальное состояние магазина, однако действия из sidenav, которые обновляют магазин, не переопределяют (изменение props val dint) домашнюю страницу.

Я чувствую, что проблема связана с этой публикацией SO, но я не могу обойти концепцию обернутых компонентов Любой совет.

React Redux - изменения не отражаются в компоненте

Ниже приведен код.

Redux Store

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
    }
}

1034 * Переходник *

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));

Кроме того, нет необходимости копировать избыточное состояние в локальном компоненте (единственный источник правды).

Вы также можете объединить onExpand и onCollapse в одну функцию onToggle и выполнить переключение в редукторе: expanded: !state.expanded или передать флаг expanded в качестве полезной нагрузки.

Answer 2

Измените свою функцию mapStateToProps следующим образом:

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

У вас есть состояние sideBarReducerMain в корне, глобальное состояние. Это состояние sideBarRecuerMain имеет расширенное значение, а не глобальное.

Кроме того, вам не нужны полезные данные для создателей ваших действий, поскольку вы ими не пользуетесь. Для вашей логики достаточно просто типа.