同时使用多个 React Provider 来渲染组件

Question

我有两个组件<App/> 和<PitPage/>，它们都很相似，并且在其中使用了另一个组件<PitComponents/>。这两个组件都在 React 提供的<Provider/> 下使用，并使用我创建的同一个商店。请注意，在调度事件时（在文件 vanillaRedux.js 内） App.js 中的这一行 <PitComponents uName="Badari Krishna" user={this.props.create.users[0].name}/> 会产生正确的答案输出“BK”，但我希望在 PitPage.js 中会发生类似的情况，其中显示 users 未定义。请让我知道我哪里出错了。截图或结果也附上。

index.html（下）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>

    <!-- binds App.js code here -->
    <div id="root"></div>


    <!-- binds PitPage code here -->
    <div id="pit"></div>

  </body>
</html>

index.js（下）

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux';
import globalStore from './components/pit/vanillaRedux';


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

serviceWorker.unregister();

App.js（下）

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import vanillaRedux from './components/pit/vanillaRedux';

import PitComponents from  './components/pit/PitComponents';
import {connect} from 'react-redux';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} class="App-logo" alt="logo" />
          <p>
            Edit <h1>src/App.js</h1> and save to reload.
          </p>
          <a
            class="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
        <PitComponents uName="UserName" user={this.props.create.users[0].name}/>
      </div>
    );
  }
}

const mapStateToProps= (state) =>{

  return {
      create: state.userCreateReducer
  }

};

const mapDispatchToProps= (dispatch) => {
  return {
      setName: () => {
          dispatch({
                  type: "DELETE",
                  id:3
          });
      }
  }
}


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

PitPage.js（下）

import React from 'react';
import ReactDOM from 'react-dom';
import PitComponents from  './PitComponents';

import {connect} from 'react-redux';
import {Provider} from 'react-redux';
import globalStore from './vanillaRedux';


class PitPage extends React.Component{


    render(){
        return(
            <PitComponents uName="user" user={this.props.create.users[0].name}/> <!--this is where error is thrown saying "user" undefined -->

        );
    }

}

const mapStateToProps= (state) =>{

    return {
        create: state.userCreateReducer
    }

  };

const mapDispatchToProps= (dispatch) => {
    return {
        setName: () => {
            dispatch({
                    type: "DELETE",
                    id:3
            });
        }
    }
}


ReactDOM.render(<Provider store={globalStore}><PitPage /></Provider> , document.getElementById('pit'));

export default connect(mapStateToProps,mapDispatchToProps) (PitPage);

vanillaRedux.js（下）

import {createStore, applyMiddleware} from 'redux';
import { combineReducers } from 'redux';
import logger from 'redux-logger';

const usersInitialState = {

    exmple: 'Example',
    users: []
};


const userCreateReducer = (state = usersInitialState,action) =>{


    switch(action.type){

        case "CREATE":
        console.log("CREATE called..!!");
        state = {
            ...state,
            users: [...state.users,action.user]
        };

        break;

    }

    return state;

};

const globalStore = createStore(userCreateReducer,applyMiddleware(logger) );

globalStore.subscribe(() => {
    console.log('globalStore updated -->',globalStore.getState());
});

globalStore.dispatch({

    type: "CREATE",
    user: {  
        id: 1,
        name: 'BK',
        age: 23,
        }
});

PitComponents.js（下）

import React from 'react';

class PitComponents extends React.Component{

    constructor(props){
        super(props);
      }

    render(){
        return(
            <div>
                <h1> Welcome {this.props.name} </h1>
                <p> This is PIT 1 </p>
                <p> From Redux --> {this.props.user} </p>
            </div>

        );
    }

}


export default PitComponents;

Answer 1

我稍微移动了一些东西以便我能理解这个问题，但我得到了它的工作。

我做的主要事情是重组 mapStateToProps 以将用户映射到状态。

无论如何，我希望这会有所帮助 - 代码位于：

https://codesandbox.io/embed/v6x49617z5?fontsize=14