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

【问题标题】：Store subscribe not working in external component商店订阅在外部组件中不起作用
【发布时间】：2019-01-17 21:18:46
【问题描述】：

所以从技术上讲，我有 2 个组件，我从第一个发送事件，我想在第二个检测到这个变化。我做了所有关于商店订阅的 Redux 文档：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 所做的状态更改。 Reducer 工作正常，调度后更新状态。

【问题讨论】：

标签： javascript reactjs redux react-redux observer-pattern

【解决方案1】：

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

也就是说，看起来您正在创建两个不同的商店实例，每个组件文件中都有一个。因此，组件 2 不知道组件 1 文件中的存储实例。

【讨论】：

我正在使用 react-redux。那么我怎样才能开 1 家商店呢？
你现在不使用 React-Redux，至少在这些例子中没有。你不是在做import {connect} from "react-redux" 并在任何地方使用它。至于商店，您通常在应用程序的主入口点调用一次createStore()。有关示例，请参阅"Configuring Your Store" Redux docs page。
如果您要使用库，您应该阅读文档并按照他们的说明进行操作。
是的，但这很奇怪。我使用了 Vue，它有一个简单的 Vuex 库。
React 和 Redux 不是 Vue 和 Vuex :) 它们相似，但不同，因此它们的工作方式不同。

【解决方案2】：

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

Store.js

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

并用作：

import store from "./Store";

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

【讨论】：