商店订阅在外部组件中不起作用

Question

所以从技术上讲我有 2 个组件，我从第一个开始发送事件，我想在第二个中检测到这个变化。我做了所有关于商店订阅的 Redux 文档：https://redux.js.org/api/store#subscribe。不幸的是，它对我不起作用。

这是我的第一个 React 项目。 (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 所做的状态更改。 Reducer 正常工作，调度后更新状态。

Answer 1

如果您使用的是 React，you should be using the React-Redux library to handle interacting with the store。

也就是说，您似乎也在创建两个不同的商店实例，每个组件文件中各有一个。因此，组件 2 不知道组件 1 文件中的商店实例。

Answer 2

请创建一个脚本 Store.js，并为每个组件导入。当您使用导出时，将从您的导出常量创建一个单例：

Store.js

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

并用作：

import store from "./Store";

/* REMOVE const store = createStore(reducers); */

商店订阅在外部组件中不起作用

Store subscribe not working in external component

javascript

reactjs

redux

react-redux

observer-pattern