Магазин подписки не работает во внешнем компоненте - PullRequest
Новая
       7

Магазин подписки не работает во внешнем компоненте

0 голосов
/ 18 января 2019

Так что технически у меня есть 2 компонента, я отправляю событие от 1-го, я хочу обнаружить это изменение во 2-м. Я сделал все, как в документации Redux о подписке на Store: https://redux.js.org/api/store#subscribe. К сожалению, у меня это не работает.

Это мой первый проект реагирования. (vue / x лучше:]) 

import React, {Component} from 'react';
import reducers from '../../reducers'
import { Dropdown } from 'semantic-ui-react'
import {translate} from "../../actions";
import createStore from "../../createStore";

const store = createStore(reducers)

class Component1 extends Component {

    componentDidMount() {
        store.subscribe(() => console.log(1));
    }

    updateTexts(lang) {
        store.dispatch(translate(lang));
    }


    render() {
            this.dropdown = <Dropdown
            onChange={this.updateTexts}
            />

        return (
            <div className={"lang-switcher"}>
                 <div className={"select-lang"}>
                    {this.dropdown}
                </div>
            </div>
        );
     }
 }

export default Component1

import React, {Component} from 'react';
import axios from 'axios';
import {Animate} from 'react-animate-mount';
import createStore from "../../createStore";
import reducers from "../../reducers";

const store = createStore(reducers);

export default class Component2 extends Component {

    componentDidMount() {
        store.subscribe(console.log(2));
    }

    render() {
         return (
            <div className="box">
                {Something}
            </div>
        );
    }
}

Я хочу, чтобы Component2 обнаруживал изменение состояния, выполненное Component1. Редуктор работает правильно, обновляет состояние после отправки.

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Пожалуйста, создайте скрипт Store.js и импортируйте для каждого компонента. Когда вы используете экспорт, это создаст синглтон из вашего экспорта const:

Store.js 

import reducers from '../../reducers'
import createStore from "../../createStore"
export default createStore(reducers)

и использовать как: 

import store from "./Store";

/* REMOVE const store = createStore(reducers); */
0 голосов
/ 18 января 2019

Если вы используете React, вы должны использовать библиотеку React-Redux для взаимодействия с хранилищем .

Тем не менее, похоже, что вы создаете два разных экземпляра хранилища, по одному в каждом файле компонента. Таким образом, Компонент 2 не знает об экземпляре хранилища в файле Компонента 1.

...