Использование нескольких поставщиков React одновременно для визуализации компонентов - PullRequest
0 голосов
/ 28 февраля 2019

У меня есть два компонента <App/> и <PitPage/>, оба они похожи и используют другой компонент <PitComponents/>.Оба эти компонента используются в <Provider/>, предоставленном React, и используют тот же магазин, который я создал.Обратите внимание, что при отправке событий (внутри файла vanillaRedux.js) эта строка <PitComponents uName="Badari Krishna" user={this.props.create.users[0].name}/> в App.js дает вывод правильного ответа "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();

enter image description here

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);

enter image description here

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;

1 Ответ

0 голосов
/ 28 февраля 2019

Я немного передвинул вещи, чтобы обдумать это, но у меня все получилось.

Главное, что я сделал, это реструктурировал mapStateToProps, чтобы сопоставить пользователей с состоянием.

В любом случае, я надеюсь, это поможет - код по адресу:

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

...