如何共享终极版存储在多个组件

Question

您好我有我整合了Redux的一个组成部分我的反应的应用程序。我打开第二和第三部分。我不想把我在第一部分获得的数据传给道具中的第二和第三。

我要做到这一点使用终极版店。有没有办法做到这一点？

App.js

import React, { Component } from "react"; 
import logo from "./logo.svg"; 
import "./App.css"; 
import RoundedButton from "./RoundedButton"; 
import { connect } from "react-redux"; 
import { bindActionCreators } from "redux"; 
import * as actions from "./actions/index"; 

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     score: 0, 
     status: "", 
     userSelected: "", 
     computerSelected: "", 
     visibility: [true, true, true], 
     buttonVisibility: false 
    }; 
    this.clickitem = this.clickitem.bind(this); 
    this.handlePlayAgain = this.handlePlayAgain.bind(this); 
    } 

    handlePlayAgain() { 
    this.setState({ 
     buttonVisibility: false, 
     visibility: [true, true, true] 
    }); 
    } 

    clickitem(user) { 
    var url = "http://localhost:4000/generate-random"; 
    this.setState({ userSelected: user }); 

    fetch(url) 
     .then(response => { 
     if (response.status >= 400) { 
      throw new Error("Bad response from server"); 
     } 
     return response.json(); 
     }) 
     .then(data => { 
     var computer = data.item; 
     this.setState({ computerSelected: computer }); 
     if (
      (user === "Rock" && computer === "Scissors") || 
      (user === "Paper" && computer === "Rock") || 
      (user === "Scissors" && computer === "Paper") 
     ) { 
      this.props.increment(); 
     } else if (user === computer) { 
      this.props.doNothing(); 
     } else { 
      this.props.decrement(); 
     } 

     console.log(user + " " + computer); 
     console.log("------------------------------------"); 

     App.contextTypes = { store: React.PropTypes.object }; 
     let store = this.context.store; 
     console.log(store); 

     arrayvar = []; 

     var arrayvar = []; 
     if (user === "Rock" && computer === "Rock") { 
      arrayvar = [true, false, false]; 
     } else if (user === "Paper" && computer === "Paper") { 
      arrayvar = [false, true, false]; 
     } else if (user === "Scissors" && computer === "Scissors") { 
      arrayvar = [false, false, true]; 
     } else if (
      (user === "Rock" && computer === "Paper") || 
      (user === "Paper" && computer === "Rock") 
     ) { 
      arrayvar = [true, true, false]; 
     } else if (
      (user === "Rock" && computer === "Scissors") || 
      (user === "Scissors" || computer === "Rock") 
     ) { 
      arrayvar = [true, false, true]; 
     } else if (
      (user === "Paper" && computer === "Scissors") || 
      (user === "Scissors" || computer === "Paper") 
     ) { 
      arrayvar = [false, true, true]; 
     } 
     this.setState({ visibility: arrayvar }); 
     this.setState({ 
      buttonVisibility: true 
     }); 
     }); 
    } 

    render() { 
    return (
     <div className="CenterDiv"> 
     <div className="AppTitle"> 
      <b>Score: {this.props.score}</b> 
      <div> 
      {this.state.visibility[0] 
       ? <RoundedButton 
        text="Rock" 
        clickitem={this.clickitem} 
        label={ 
        this.state.userSelected === "Rock" && 
         this.state.computerSelected === "Rock" 
         ? "User & Computer Selected" 
         : this.state.userSelected === "Rock" 
         ? "User Selected" 
         : this.state.computerSelected === "Rock" 
          ? "Computer Selected" 
          : "" 
        } 
       /> 
       : null} 
      {this.state.visibility[1] 
       ? <RoundedButton 
        text="Paper" 
        clickitem={this.clickitem} 
        label={ 
        this.state.userSelected === "Paper" && 
         this.state.computerSelected === "Paper" 
         ? "User & Computer Selected" 
         : this.state.userSelected == "Paper" 
         ? "User Selected" 
         : this.state.computerSelected === "Paper" 
          ? "Computer Selected" 
          : "" 
        } 
       /> 
       : null} 
      {this.state.visibility[2] 
       ? <RoundedButton 
        text="Scissors" 
        clickitem={this.clickitem} 
        label={ 
        this.state.userSelected === "Scissors" && 
         this.state.computerSelected === "Scissors" 
         ? "User & Computer Selected" 
         : this.state.userSelected === "Scissors" 
         ? "User Selected" 
         : this.state.computerSelected === "Scissors" 
          ? "Computer Selected" 
          : "" 
        } 
       /> 
       : null} 
      </div> 

      <div className="Status">{this.props.status}</div> 

      {this.state.buttonVisibility 
      ? <button onClick={this.handlePlayAgain} style={{ margin: 30 }}> 
       Play Again 
       </button> 
      : null} 

     </div> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { score: state.score, status: state.status }; 
} 

export default connect(mapStateToProps, actions)(App); 

index.js

import React from "react"; 
import ReactDOM from "react-dom"; 
import App from "./App"; 
import registerServiceWorker from "./registerServiceWorker"; 
import "./index.css"; 

import { Provider } from "react-redux"; 
import { createStore } from "redux"; 
import scoreReducer from "./reducers"; 

let store = createStore(scoreReducer); 

ReactDOM.render(
    <Provider store={store}><App /></Provider>, 
    document.getElementById("root") 
); 
registerServiceWorker(); 

secondcomponent.js

export default class SecondComponent extends Component { 
    render() { 
    return (
     // print score which is in redux 
    ); 
    } 
} 

第三component.js

export default class ThirdComponent extends Component { 
    render() { 
    return (
     // print score which is in redux 
    ); 
    } 
} 

在多个组件中使用redux商店的方式是什么？

Answer 1

不限组件包裹有connect：

connect(mapStateToProps, actions)(AnyComponent); 

将有权访问整个redux存储。
随着mapStateToProps可以从redux商店经由props通过只相关的数据块到所连接的组件。

关于组件内部state，我的经验法则是设置内部状态只是为了那就是相关的特定组件的数据。
例如，extend或collapse状态下拉。

至于ajax请求，如果你已经使用redux我强烈建议使用行动与thunks或sagas并通过redux流通过新获取的数据：
动作/咚 - >减速 - >连接组件。

编辑
作为随访到您的评论，
你并不需要传递要连接到提供每个组件，您只需通过一个根组件（App你的情况），并且每个如果有必要的App孩子可以连接到redux：

class SecondComponent extends Component { 
    render() { 
    return (
     // print score which is in redux 
     <div>this.props.score</div> 
    ); 
    } 
} 

export default connect(mapStateToProps)(SecondComponent); 

而且还有其他成分：

class ThirdComponent extends Component { 
    render() { 
    return (
     // print score which is in redux 
     <div>this.props.score</div> 
    ); 
    } 
} 

export default connect(mapStateToProps)(ThirdComponent); 

编辑＃2
作为后续到其他评论：

在道具等等传递价值部件或使用上面所说的方法， IDK这是推荐？

避免连接组件时，你可以和道具向下传递给孩子，这样做的主要原因是为了防止redux依赖。
我更愿意尽我所能保持我的组件“哑巴”，并让它们只关心事物的外观。
我确实有一些组件关心应该如何工作，这些组件主要处理逻辑并将数据传递给子组件，它们是我经常连接的组件。

当我注意到我的应用程序正在缩放，并且我的一些组件正在充当道具的代理（我甚至对此有一个词！“Propxy”），那就是他们从父母那里获得道具并将其传递给他人如果不使用它们，我通常会在组件树的中间注入一个连接组件，这样我就可以让树流中的“propxy”组件更加轻松和纤薄。

Answer 2

在反应应用程序中使用redux的一般方法是将其与react-redux库一起使用。该库提供了connect函数，该函数有助于以更干净的方式访问反应组件中的商店。

，而不是试图通过上下文来访问存储，只需使用connect功能：

import { connect } from 'react-redux'; 

const SecondComponent = ({ score }) => <div>{score}</div> 

// with help of `connect`, you are providing `score` prop to `SomeComponent` 
// next, you can render that connected component anywhere in your app 
export default connect(
    (state) => ({ 
    score: state.score 
    }) 
)(SecondComponent) 

您可以使用连接任何你如ThirdComponent广告等反应的组分。