Я довольно новичок в редуксе и пытаюсь решить эту проблему. По сути, у меня есть два компонента, которые не связаны (не родитель-дочерний, ни дочерний-родительский, ни родные), и я хотел бы использовать 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
Любая помощь будет принята с благодарностью! Спасибо