All geek questions in one place

How to take a variable from the outside

I need to accept the value of a variable that is placed outside my reactor container.

<body>
    <div id='react-app'></div>

<script>
    var _variable = 3
</script>

</body>

I need to accept this value in my reaction component and, if possible, store this value in Store (redux)

+4
source share
3 answers

If you place a script declaration before reactively loading the script, respond with the script to access it.

<script type="text/javascript">
  var x = {{ user_details }};
</script>
<script src="/static/app.js"></script>
+2
source

When setting up storage, Redux has an api for hydrating gearboxes. Method Signature createStore:

createStore(reducer, [preloadedState], [enhancer])

So you can define your method configureStoreas:

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

import reducerA from 'reducers/a'
import reducerUserDetails from 'reducers/user-details'

export default function configureStore(initialState = {}) {
  const reducer = combineReducers({
    reducerA,
    reducerUserDetails,
  });

  // If you want to use dev tools
  const composeEnhancers =
    process.env.NODE_ENV !== 'production' &&
    typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;

  const enhancer = composeEnhancers(
    applyMiddleware(
      thunk // If you want to have async actions
    )
  );

  return createStore(reducer, initialState, enhancer);
}

, index.js , configureStore :

const store = configureStore({
  reducerA: {...},
  reducerUserDetails: window.userDetails || {},
});

ReactDOM.render(
  <Provider store={store}>
    <YourApp />
  </Provider>,
  document.getElementById('react-app'),
);
+2

.

Singleton

, , , ES6 . , , .

.

? , -, ES6 . JS

, ?

, React App

reactDom.render() :

import React from 'react'
import ReactDOM from "react-dom"
import { Provider } from "react-redux"
import MyApp from "./pathto/myapp.js"
import store from "./pathto/store.js"

window.RenderApp = function () {
    new ReactDom.render(
        <Provider store={store}><MyApp /></provider,   
        document.getElementById('root_element')
    );
}

, , ES6. , , , window, JS.

, -, :

<div id="root_element"></div>
<script src="path/to/bundle.js></script>
<script>
    window.RenderApp();
</script>

, ? , , :) , :

...
window.RenderApp = function (outside_variable) {
    new ReactDom.render(
        <Provider store={store}><MyApp someProp={outside_variable} /></provider,   
        document.getElementById('root_element')
    );
}

HTML

...
<script>
    var x = 72;
    window.RenderApp(x);
</script>

Redux?

, , , , , redux. . , , ES6 .

, . defaultStore.js.

let defaultStore = {
        item: "one",
        other: "two"
    }

export default (defaultStore);

:

import defaultStore from "path/to/defaultStore.js"

export default function app( state = defaultStore, action ) {

    switch (action.type) {
        //...
    }

    return state;
}

, , :

...    
import defaultStore from "path/to/defaultStore.js"

window.RenderApp = function (outside_variable) {

    defaultStore.item = outside_variable;

    new ReactDom.render(
        <Provider store={store}><MyApp /></provider,   
        document.getElementById('root_element')
    );
}

, , , .

js HTML

...
<script>
    var x = 72;
    window.RenderApp(x);
</script>

! , .

+1

Source: https://habr.com/ru/post/1670962/

More articles:


All Articles