Магазин Redux возвращает разные состояния для разных компонентов (React) - PullRequest
1 голос
/ 09 марта 2020

Я довольно новичок в редуксе и пытаюсь решить эту проблему. По сути, у меня есть два компонента, которые не связаны (не родитель-дочерний, ни дочерний-родительский, ни родные), и я хотел бы использовать Redux для глобального управления состоянием для передачи данных из одного компонента в другой.

Код работает в том смысле, что Компонент А может отправлять данные в хранилище. Записывая store.getState () на компонент A, я могу видеть новое обновленное состояние. Тем не менее, регистрируя store.getState () на компоненте B, я не могу увидеть это же обновленное состояние. (элемент будет пустым)

Используя расширение ReduxDevTools, я вижу, что состояние обновляется в компоненте A после вызова метода onPress, но не для B.

Состояние компонента A обновлено :

Состояние компонента B не изменено :

Компонент A

class a extends Component {

 // implementation code

   onPress = r => {
      this.props.sendProblem(r)
      // console.log(store.getState())
   }

 // implementation code

 }

 A.propTypes = {
   sendProblem: PropTypes.func.isRequired
 };

 export default connect(null, {sendProblem})(A)

Компонент B

// implementation code 

componentDidMount() {
// console.log(store.getState())
}

// implementation code

B.propTypes = {
  item: PropTypes.object
}

const mapStateToProps = state => ({
   item: state.items.item
});

export default connect(mapStateToProps)(B);

** problemReducer **

import { ABC } from '../actions/types';

const initialState = {
    item: {}
}

export default function(state= initialState, action) {
    switch (action.type) { 
        case ABC: 
            return {
              ...state,
              item: action.payload
            } 
        default:
            return state; 
    }
}

** problemActions **

import {
   ABC
 } from "./types";

export const sendProblem = r => dispatch => {
     dispatch({
      type: ABC,
      payload: r
    })
};

** Root Редуктор **

// implementation code 

export default combineReducers({
  auth: authReducer,
  errors: errorReducer,
  items: problemReducer
});

// root reducer used in store.js to create store

Любая помощь будет принята с благодарностью! Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...